在这个教程中，你将学习到如何在Photoshop中创建一个漂亮简洁的绿色基调的网页布局。

最终效果

先看看我们最终的成果，单击图片可查看完整比例的设计图。

设置Photoshop文档

1、在Photoshop中新建一个宽980像素，高830像素的文档。背景色为白色。

2、如果你的Photoshop界面中没有显示标尺，选择视图>标尺打开（Ctrl + R也可打开或关闭标尺）。

3、在画布上拖出两条垂直辅助线和两条水平辅助线（点击标尺后保持不放，然后拖向画布），分别放置到文档的边缘。在这些辅助线之间，我们将为内容创建背景。

创建背景

4、选择圆角矩形工具(U)，设置半径为10像素，颜色为#E0E0AC，然后在整个画布上创建一个圆角矩形（从画布左上角拖至右下角）。命名图层为”bg“。

5、现在，我们打算让画布变得大一点。首先，我们将在文档的顶端腾出点空间，以放置网站的标记。点击图像>画布大小(Alt + Ctrl + C)，按照下图的设定其中参数。

6、再次选择图像>画布大小(Alt + Ctrl + C) ，按照下图进行设定。

7、单击激活图层面板中的背景图层，设置前景色为#6C821C，使用油漆桶工具(G)填充背景图层。

8、在“背景”图层之上创建一个新图层，命名为”渐变”。

9、选择渐变工具，在“渐变”图层上从上至下使用由白到黑的渐变。

10、设置“渐变”图层的模式为叠加，不透明度为10%。

11、确定当前图层为”渐变” ，选取图层>图层蒙版>显示全部。

12、选择渐变工具，从文档底部从下到上进行由黑到透明的填充。

13、在”渐变”图层上单击右键，选择“转换为智能对象”。

14、执行“滤镜>杂色>添加杂色”操作，使用如下参数（数量为1.8%，平均分布）。

15、新建图层，选择画笔工具，设置颜色为白色，主直径为300像素，在画布的上部创建一条白线。

16、将刚才的图层命名为“高光”，设置不透明度为50%。

17、在“bg”图层下新建一图层，按“D”键重置前景色为黑色，背景色为白色，执行“滤镜>渲染>云层”。

18、右键单击该图层，选择“转换为智能对象”，并将图层命名为“纹理”。

19、确保“纹理”图层已被选择，执行“滤镜>模糊>动态模糊”。其中角度为90，距离为549像素。

20、执行“滤镜>锐化>锐化”。

21、为“纹理”图层增加图层蒙版（图层>图层蒙版>显示全部)。

22、选择渐变工具，从文档底部从下到上进行由黑到透明的填充。

23、将“纹理”图层的模式设置为重叠，不透明度为40%。

设置文档内容的背景

24、双击“bg”图层，打开图层样式窗口，勾选外发光，设置混合模式为“正片叠底”、不透明度为10%，发光颜色为#33302e，图素大小为12像素，其余为默认值。

25、创建新图层，命名为“阴影”。设置前景色为#2A2009，选择铅笔工具，设置主直径为25像素，在圆角矩形的底部创建一个圆点。

26、右键单击“阴影”图层，选择“转换为智能对象”。

27、执行“编辑>自由变形”(Ctrl + T)，将圆点拉伸为至圆角矩形宽度类似的位置。

28、执行“滤镜>模糊>高斯模糊”，半径为7.6像素。

29、设置“阴影”图层的模式为“正片叠底”，不透明度为30%，并置于“bg”图层之下。

创建导航条

30、现在，我们开始制作导航条。选择矩形工具，颜色设置为#D8D8A5。

31、在前面创建的大圆角矩形之上新建一高度为60像素的矩形，并命名图层为“导航条”。

提示：按F8打开信息面板以便查看高度等信息。

32、在图层面板中双击“导航条”图层，打开图形样式窗口。设置参数如下图。

33、你可能注意到了，添加了导航条之后，大圆角矩形的顶部已不再圆滑。为了纠正这个问题，我们即将使用剪贴蒙版。右键单击“导航条”图层，选择“创建剪贴图层”。

34、现在，我们将创建当前页面按钮的背景。选择矩形工具，设定颜色为#A6A43F，生成一个高60像素的小矩形。

35、设定图层的名称为“当前页面按钮”，不透明度为15%。

36、右键单击“当前页面按钮”图层，选择“创建剪贴蒙版”。

37、按住Ctrl键，在图层面板上选择最上面的四个图层，按Ctrl + G将其命名为“背景和导航条”。

38、按T键选择文字工具，为导航条增加文字内容，颜色设定为#A6A43F。字体按照你的喜好自由设定。

定义“首页特写”区域图案

39、现在，我们将创建一个图案。新建一个5px*5px的文档，背景为透明。

40、设定前景色为#2A2009，选择铅笔工具，将其主直径设为1像素，在文档中央创建一个正方形。

41、然后执行“编辑>定义图案”，注意命名尽可能的容易记忆和识别。然后就可以关闭这个文档了。

创建“首页特写”区域

42、选择矩形工具，创建一高度为330像素的矩形，颜色随意。

43、在刚才生成的图层上双击，打开图层样式窗口，按照下图设定参数。（将高级混合中的不透明度设为0，再选择之前定义的图案进行叠加，不透明度设为5%。）

44、将刚才的图层命名为“图案”。

45、选择圆角矩形工具，半径设为8像素，颜色设定为#A6A43F，创建一高度为240像素、宽度为940像素的圆角矩形。

46、命名图层为“特写背景”，将不透明度设定为50%。

47、选择矩形工具，颜色设定为#A6A43F，创建一宽610像素高220像素的矩形作为特写图片的背景。命名当前图层为“图片背景”。

48、使用移动工具插入你中意的图片。

49、将图片放置在刚才创建的矩形中，右键单击图片图层，选择“创建剪贴蒙版”，然后命名为“图片”。

50、选择文字工具（T），在特写区域的右侧增加一些文字。文字大小、颜色以及字体尽量接近下图设定。将这些文字图层组合成“特写区文字”组。

创建回应按钮

51、我们现在开始制作位于特写区下部的两个按钮。选择圆角矩形工具，设定半径为8像素，颜色为A6A42F，创建一个小圆角矩形，命名图层为“按钮一”。

52、我们想把按钮顶部的圆角弄直，为了达到这个目的：

1. 确保按钮图层为当前图层。
2. 选择“路径选择工具”，点击按钮，每个圆角上出现了两个锚点。
3. 选择“转换点工具”，依次点击按钮上方的四个锚点。
4. 选择“直接选择工具”，按住Shift键，挪动圆角锚点，形成直角。

53、设定“按钮一”图层的不透明度为30%。

54、然后使用文字工具增加内容，颜色为#EAEAB7。

55、你还可以增加图标。我使用的是Function网站发布的免费图标。

56、将文字、图标以及按钮图层放在一个名为“按钮一”的组中。

57、按照上述步骤，使用不同文字和图标，生成另一个按钮。

58、为了有效组织文件，将有关特写的图层都组合在一起，并命名为“首页特写”。

创建3D丝绸带

59、选择“矩形工具”，创建一高度为130像素的矩形，颜色为#A6A43F，命名图层为“丝带背景”。

60、选择“圆角矩形工具”，设定半径为10px，在刚才创建的丝带背景的左侧创建一圆角矩形。你可以拖出一些辅助线以便提供一些便利。

61、点击激活刚才创建的圆角矩形的矢量蒙版，然后选择“圆角矩形工具”，在选项栏中选择“从形状区域减去”，在圆角矩形左上方新建一圆角矩形。

62、创建一新图层，右键单击，选择“创建剪贴蒙版”。

63、然后选择“渐变”工具，从左到右填充由白色至透明色的渐变。可参考下图。

64、设定图层模式为“叠加”，不透明度为30%，命名为“高光”。

65、选择“圆角矩形工具”，设定颜色为#878533，在“丝带背景”图层之上创建一圆角矩形。

66、然后选择矩形工具，在选项工具条中选择“从形状区域减去”，在我们不需要的绿色圆角矩形区域创建矩形。

67、然后双击图层打开图层样式窗口，设定内阴影，不透明度设为10%，角度120度，距离4像素，大小5像素，混合模式为“正片叠底”，其余为默认值。

68、在丝带右侧重复上述步骤。

69、将刚才和丝带有关的图层组合成“丝带”组。

70、在“丝带背景”图层下创建一新图层，利用前面叙述的方法生成阴影。

71、选择“圆角矩形工具”，半径为8像素，颜色为#E1E0C1，创建四个220px*110px的圆角矩形。

72、将这四个图层的不透明度调为50%，并组成“图片”组。

73、选择“横排文字工具”，在文档底部增加一些文字。你还可以参考之前的做法添加一些图标。

74、使用文字工具，颜色为#E0E0A，在文档顶端创建站点名称。

75、双击图层，设定图层样式，添加渐变叠加，其中模式为叠加，不透明度15%，其余为默认值。

77、最后，在丝带中将放入四张图片，基本完成页面设计。

恭喜！我们终于完成了这个教程。

————————
译者的话：经过1个下午的翻译，这篇教程终于完工。最大的感受就是教程制作是一件耗时费力的工作，高手能把自己的一些工作流程做成教程分享给大家，实在是一个高尚的行为，向作者致敬！

Firefox不仅仅是一个很棒的浏览器（即便你不是网页设计人员，也可以使用Firefox，当然需要你有一定的好奇心），它还是网页设计人员的好朋友。在Firefox中，你可以完成几乎所有的网页测试工作，结合图片编辑软件和代码编辑器，Firefox能让你更快更好的完成设计工作。

这篇博客并不打算列出所有和网页设计有关的Firefox组件列表，而是想把作者日常使用的那些相关组件介绍给同好。

我十分乐意倾听您如何在网页设计中使用Firefox以及更好的组件推荐。

首先，Firefox在默认安装后，没有内建任何关于网页开发设计的功能，尽管如此，它仍然有一些非常实用的功能，现列举如下：

1. Firefox内置一个漂亮的源代码查看器，能亮显并格式化HTML和CSS代码（右键>查看网页源代码）
2. 内置错误控制台（工具>错误控制台）
3. 内置网页信息查看器，能够将当前网页中使用的资源分类列举出来（右键>查看页面信息），如果看到不错的背景图片或者flash文件，你可以在网页信息中查找并保存。

我喜欢的Firefox网页开发组件

Firebug：我最喜欢的组件！你有没有想过在浏览器中即时的编辑一个网页，但同时又不丢失你的源代码？如果有这样的想法，Firebug就可完成你的心愿。比如说，你可以在浏览器中实时地编辑和查看CSS，当你觉得满意后，将CSS再拷贝到你的样式表中。是不是很酷？

Colorzilla：Colorzilla是一个颜色拾取器，安装后出现在浏览器的状态栏中，能让你获取页面中任何一点的颜色信息，这样就省去了你在样式表中查找特定颜色的麻烦。

FireFTP：FireFTP是一个FTP客户端，一个可以在Firefox浏览器中启动的客户端。有了它之后，谁还需要一个单独的FTP应用程序呢？

YSlow：YSlow能够测试你的网页各项内容的表现速度，并且告诉你瓶颈所在，还针对性地提出加速的建议！

Codetech：一个内嵌于Firefox的文本编辑器。能够在一个新的标签页打开或在一个浮动窗口中打开。

Screengrab：如果你曾为截取长长的网页烦恼、为要在Photoshop中裁剪不必要的部分郁闷，那Screengrab组件可让你一键实现这些功能。有了Screengrab，你可以截取网页当前显示的部分或者整个网页，然后将其拷贝到剪贴板，或者直接保存到硬盘中。没错，这些功能只需要点一下鼠标。

IETab：尽管我们都不怎么感冒IE，但是大多数网友都使用IE。因此，与其打开IE查看你最新的网页修改，你还不如安装IETab插件，然后在Firefox中新建一个标签页打开IE。我知道，在Firefox中使用IE感觉很奇怪，但也不失为一种方法。

Web Developer Toolbar：这个组件不用介绍了，地球人都知道。网页设计人员必备组件。

最后，如果你知道其他有用的网页设计相关组件，请在下面的评论中告诉我，我将洗耳恭听。

将亲朋好友的生日（无论阳历还是阴历）输入到这个网站中www.jiyiri.com，选择诸如邮件、手机短信、MSN信息等等的提醒方式，你再也不会为忘记亲人的生日而留下遗憾了，值得一提的是，短信提醒业务是免费的。

谷歌日历也支持免费短信提醒，可是多少年过去了，它的中文版依然不支持农历。

起初，南方周末的网站是整个南方报业集团网站中的一个子站，内容更新较快，但版式陈旧（我的印象中，自建立就没改过版……），缺乏互动（可以说没有互动手段，除了使用鼠标滚动窗口……），虽说上乘内容是媒体最终安身立命之依托，可别忘了有牛人说过——媒介即信息，形式也很重要，甚至决定着内容，既然要弄网站，就得有点网站的特点，而不是只能看不能参与的报纸电子版。

南方周末日前推出新版网站www.infzm.com，独门独户，不再是南方报业网中的一个栏目。新版网站采用WordPress作为建站工具，大量使用极具Web2.0特色的交互手段，如标签、Google地图、Digg、社会化书签等等。

国内报纸网站大都采用自主开发或商业性内容管理系统，南方周末新版网站能采用免费开源的WordPress系统作为发布后台，可谓再次体现出南方系报纸敢为天下先的勇气和智慧。

不就是使用了WordPress建站程序吗？何以值得如此评价？

我欣赏的是网站建设者开放的心态，能摈弃过去自成体系的网站系统，采用免费开源软件WordPress，意味着接受开源大家庭众人的智慧，从善如流，而不是固步自封，自我欣赏。

WordPress为何物？有同学可能还不清楚，简单地说，WordPress是一种使用PHP语言开发的免费开源博客平台，用户可以在支持PHP和MySQL数据库的服务器上建立自己的Blog，WordPress强大易用，因此深受全球独立博客使用者的喜爱。

WordPress最初是作为建立个人博客的工具而被人们所认识，慢慢地，随着WordPress开发者的增多，WordPress及其相应的插件功能越来越强大，有成为CMS（网站内容管理系统）的态势。

WordPress之所以能快速发展，我认为最重要的原因在于WordPress简洁的结构和毫无保留的开源。网络上有诸多免费开源的内容管理系统，如XOOPS、Joomla、DEDECMS、PHPCMS等等，大都存在学习成本较高的问题，导致曲高和寡，国内应用更是寥寥无几。可WordPress的系统结构非常简洁，像我这样的菜鸟都能折腾一下，改改插件，弄弄模板。

国内有很多WordPress的使用者和开发者，他们为WordPress的发展和中国化做出了许多贡献，我想他们从WordPress中获得了更多，那就是分享和协作。

互联网如果有一种信仰的话，那么这个信仰的核心价值观就是分享。它已经像种子一样被无数类似于WordPress的开源项目撒播到了中国，尽管土地很贫瘠，气候很恶劣，可这些种子还是生根发芽了，安慰着绝望的心灵。

最后，说说WordPress的创始人马特·穆伦维格(MattMullenweg)，年轻，美国80后，1984年出生，20岁大学退学创业。中国的大学啥时候能培养出此等人才啊。

在信息泛滥成灾的当今网络环境中，网友的注意力成了最稀缺的资源，各新闻网站在争夺这个最重要的资源上各显神通，或倚重内容、或重视速度……不一而足，照片与一般性的文字资料相比，更能吸引眼球，因此新闻网站都在如何更好得利用好新闻照片上花足了功夫，纽约时报的网站也不例外。

新闻图片在纽约时报网站中的应用，大体可分为两大类，一类是在新闻正文页面中插入单幅图片，正文仍以文字为主体，这类应用可谓司空见惯，我就不再赘述。另一类是新闻幻灯片（SlideShow）——以图片为主要传递信息手段的网络新闻组织形式——这类应用和国内新闻网站的一些做法略有不同。

在早期，其实也没有多久，2005年之前，纽约时报的新闻幻灯片主要是通过将图片插入到网页，然后将网页运用超级连接组织在一起，比较简单。看个实例：

这种手段实现起来比较方便，但也存在一些问题，比如无法自动播放，改版困难等。

不久，纽约时报采用了在单个网页中插入flash幻灯片的做法代替了上述的组织手段。让我们看个这种flash幻灯片的实例:

Flash幻灯片与原来的网页幻灯片相比，更节约页面的空间，可设定多种切换效果，也可让其自动播放，更富有交互性。可惜这种手段有一硬伤，就是目前无法让搜索引擎检索到Flash内部的内容，导致很多优秀的内容无法让更多使用搜索引擎获取信息的用户浏览。

目前，纽约时报多媒体栏目使用最多的是基于JavaScript的新闻幻灯片。先看一组和中国有关的幻灯片：

基于JavaScript技术上的新闻幻灯片，在具备Flash幻灯片的优势的同时，又克服了Flash幻灯片不支持搜索引擎的弊端，逐渐成为目前国内外各大新闻网站制作新闻幻灯片的首选手段。

在图书馆找到了一些相关的教材，不甚理想，或枯燥艰涩，或东拼西凑，不大适合入门学习者。

还好有网络，有搜索引擎。键入“action script 3.0 入门教程”后，能找到许多相关资料。经过比较，我选择了O’Reilly出版的ActionScript.3.0 Bible作为学习资料。国内的一些教材，大都遮遮掩掩，不肯把教程中的代码放到网上。O’Reilly公司不但将这本书的网络版免费公布，而且还可以下载所有相关的代码。（相关链接：ActionScript.3.0 Bible 网络版、教程中相关代码下载、网友制作的ActionScript.3.0 Bible电子书，PDF格式，可离线阅读）

下面贴上我按照范例做的第一个作品，虽然很简单，但却一点都不妨碍我的成就感，哈哈，最好的学习就是自己动手。

学习笔记：
1、ActionScript 3.0中类文件的保存是有讲究的，不能乱存；
2、Flash文档中关联的类文件和舞台是紧密相连的。

Whatever is on the stage will become part of that class, and whatever you do to that class will affect the stage.

第五条　香港和澳门记者来内地采访，需向中央人民政府驻香港特别行政区联络办公室或中央人民政府驻澳门特别行政区联络办公室领取由中华全国新闻工作者协会制发的港澳记者采访证。

第六条　香港和澳门记者在内地采访，需征得被采访单位和个人的同意，采访时应当携带并出示港澳新闻机构常驻内地记者证或港澳记者采访证。

第八条　香港和澳门记者因采访报道需要，在依法履行报批手续后，可以临时进口、设置和使用无线电通信设备。

这样一来，港澳记者在内地的新闻活动大受限制，一般媒体的实习生能去的、能做的，港澳的记者未必能够去、能够做。这也就是我题目所说的港澳记者不如内地记者的地方。

其实，我想说的是，中国官员们的决策充满着矛盾。

一方面，中国长期致力于向世界展示一个积极正面的国家形象。为此在奥运会前后，一度松动对国外、港澳台媒体的诸多限制。去年年底，中国政府更是雄心勃勃，想要建立中国的CNN，试图主动影响议程，而不是简单地事后审查。

另一方面，国内诸多抱守“正确引导公众舆论”观念的官员屡屡揉碎那一丁点的积极国际形象，这次出台的《香港澳门记者在内地采访办法》就是其中之一。

既然香港和澳门都已回归，为什么还要区别对待？统战工作往往是给别人好处，争取别人的好感，可这个政策无论如何没有释放出任何积极的善意来。一部分港人的反应在此有所报道。

这种看起来互相拆台的行为其实是部门利益作祟。宣传部门想壮大自己的实力，争取资金建立海外电视台、国家网络电视台。统战部门想着早点管住港澳的媒体，少惹麻烦的同时用好部门的权力，谁能保证那些审批官员能够拒绝媒体的上贡呢？

至于国家的对外形象，那是忽悠更高级领导的。

早期的纽约时报网站在网站建设、内容整合等方面落后AOL和MSN等较为纯粹的网络媒体，但经过几年的发展，纽约时报网站在2007年被评为最佳报纸网站，成为传统报纸网站中的领军者。纽约时报网站屡屡有令人眼前一亮的新闻组织手段、呈现方式，其对Flash的应用可谓炉火纯青，令人叹为观止，纽约时报多媒体栏目逐渐成为新闻院校、同行研究和学习的标本。

下面是纽约时报多媒体栏目中的代表作品之一：Faces of the Dead in Iraq

在这个作品中，集成了从03年至今——截至09年已有4200多名——所有美军阵亡人员的军人正面照。

还将其阵亡地点、时间、军种、军衔、种族、家乡等做了分析。

有的士兵还有一些音频资料。

这些资料通过flash整合在一起，读者可通过拉动时间线、点击照片“像素”进行互动。与平面媒体和电视媒体的报道手段相比，纽约时报的这个页面充分利用Flash灵活强大的互动功能，通过对阵亡数据的整理分析，将战争的残酷有效地传递给读者，大大提高了读者获取信息的主动性，同时也能很好避免同行的剽窃。

当然，我首先打的就是搜狗词库的注意，搜狗细胞词库的介绍是这样的：

细胞词库是搜狗首创的、开放共享、可在线升级的细分化词库功能。

既然是开放共享，我也就放心的拿来改造了。搜狗的细胞词库其实并没有完全开放，其细胞词库使用的格式是.scel，无法直接打开修改，但它提供.txt格式的词库下载。从搜狗输入法下载的魔兽世界词库的txt版本中，词条是这样排列的：

逃脱
图腾
图腾集中
塔特
塔特纳克

谷歌拼音输入法的用户辞典格式如下：

谷歌 1 gu ge
这三列分别称做词语、词频、拼音；其中词频不是必需的，词语和拼音是必需的。列之间的分隔可以是空格或者”Tab”缩进，拼音的音节之间也要有空格、”Tab”缩进或者单引号分隔，并且不能字和拼音穿插放置。

现在，我的任务就是就是将.txt的词库加上拼音即可。

从网上搜索了一大堆汉字转拼音的程序，都不能完全符合词库转换的要求，包括含有貌似木马程序的sogou-google著名工具。后来我想起word中有拼音功能，能不能使用VBA将汉字转换为拼音呢？再使用“vba 汉字 拼音”搜索后，发现了一网友编写的汉字转拼音工具，功能强大，而且还有源码可以学习。

在Excel中导入搜狗版的魔兽词库后，使用函数HzToPy()轻松完成转换工作，然后将文件另存为.txt格式，再导入到谷歌拼音输入法后即可。最后成果见下图：

至此，谷歌拼音输入法魔兽世界词库大功告成，嫌转换麻烦的同学请点击这里直接下载！

最后顺便说说谷歌输入法，谷歌拼音输入法最早推出网络同步用户词库的功能，吸引了一批用户，可这个功能却被后来的搜狗输入法借鉴后，加上搜狗输入法在易用性和词库数量方面的投入，谷歌拼音输入法渐渐失去了竞争中的优势，慢慢形成了搜狗输入法一家独大的局面。我就想不通，既然谷歌投入了资金和人员做输入法这个项目，为什么连个输入法的词库都不愿意改进呢？这个没有什么难度啊？再联想到谷歌日历不支持按农历重复事件功能，我再次认为，谷歌缺乏中国化的诚意。

前一段时间，在别人的博客中发现一个功能清大的wordpress媒体管理插件WordTube，这个插件基于JW FLV MEDIA PLAYER之上，能在WordPress页面和文章中插入各种格式的图片幻灯片、flv视频、swf文件，更吸引人的是，这款播放器还能创建自己的播放列表，不仅如此，还支持网友引用、共享、推荐功能，可以说是目前功能最强大的网页内嵌播放器，最后，它是免费并且开源的，感兴趣的同学可以下载源码学习。

安装WordTube插件后，我卸载了原来安装的Audio player、WP-FLV这两个插件，不是这两个插件不好用，而是因为wordtube可以替代它们。

最后，WordTube插件的设置好像略微有些问题，我自定义的播放器大小不起作用，不知道是什么缘故，欢迎同学们指点。