推荐阅读
UI设计师最需要了解的设计工作流程
每个设计师看文章都有自己的喜好，有些人喜欢看一些纯设计技法或者设计教程，有些人喜欢看一些偏理论的知识点，比如工作经验、设计流程、设计分析等等。其实作为一名UI设计师应该看文章不要挑剔，每一方面都要看一下，这样才能更好的提升自己的设计水平和管理能力。欢迎关注作者所在的丁香园设计团队微信公众号：「花厂设计招待所」今天主要来跟大家聊聊我自己的工作习惯和方法，相信作新人看了一定会收获很多~1. 一般怎么规划好工作上的需求?我使用teambition软件来管理我的日常需求，teambition是一款团队协作软件，由于公司使用的是tower，所以目前teambiton我是用来管理个人需求。我用过tower，可能觉得界面不够美观，有些地方体验不是特别好，不过用来团队协作应该也是不错的。由于朋友的推荐，我就尝试用teambiton来管理个人的日常需求，发现已经能够满足日常的工作需要了。下面我放上几张截图来说明我如何使用teambition。因为teambition功能点非常多，这里只是做个示例，希望有兴趣的自己体验一下。产品设计流程图（PM）App设计流程图适合全新App设计，整理出所有大致需要做的东西，然后按照从左到右的顺序分别完成。
使用Photoshop给外景人像添加唯美逆光效果
最终效果原图1、打开素材图片，创建可选颜色调整图层，对黄色，青色进行调整，参数及效果如下图。这一步主要把草地的颜色转为橙黄色。2、创建色相/饱和度调整图层，对黄色进行调整，参数及效果如下图。这一步把草地颜色转为红褐色。
Camera Raw各版本英文变中文的方法
很多朋友对Photoshop CS2 RAW格式插件的安装没问题,只需拷贝Camera Raw.8bi文件到相应的文件夹就可以了,但是显示的是英文,希望此方法能够解决大家将Camera Raw各版本在Photoshop CS2 中英文变中文的方法的问题。高手就不要看了！ Photoshop CS2 RAW格式插件的安装路径: PS CS2英文版，安装路径是：C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats把Camera Raw.8bi拷贝到这个目录下就行 Adobe Photoshop CS2简体中文版的安装目录：把Camera Raw.8bi文件copy到C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\文件格式 目录下面即可 安装好cs2后，将RAW格式的图片导入PSPScs2,若显示的Camera Raw英文界面,选择open,将图片导入PS中，选择文件，看看有没有关闭并转到Bridge选项，若没有，需要进行升级，即Adobe Bridge，Adobe Bridge 1.0.2 update的下载地址：http://download.adobe.com/pub/adobe/...idge102Win.zip。升级后,打开PScs2,文件--关闭并转到Bridge--提示保存图片，是否？进入在桌面Adobe Bridge中--Edit(编辑)--Preferences....(首选项)--Advnaced(高级)--Language(语言)--选择Chinaexe,Simplified(简体中文)－－OK(确定)--关闭Adobe Bridge,重启PS，打开文件就出现RAW的中文界面了,此方法适合于Camera Raw各个版本
Flash动态解析Web应用程序服务器路径
玩过Flash+ASP/PHP开发的朋友都知道，在Flash软件里测试Flash从后台脚本读取数据的时候，不能直接的用如“loaddata.asp”这样的路径，必须是http://www.domain.com/Application/loaddata.asp 或者 http: 开头的路径。有些人问了？为什么呢？当FlashPlayer里测试的时候收到load("loaddata.asp")这个命令的时候，他会直接读swf文件路径下的 loaddata.asp文件。但由于没有经过IIS的运行处理，直接读入Flash内部，当然，读出的结果就是%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%类似这样了，所以就无法根据我们的意愿来处理数据了，而当FlashPlayer执行load("http://www.domain.com/Application/loaddata.asp")这个命令的时候，他就不再是本地的TXT文件读取命令，而是一个HTTP请求，FlashPlayer把这个请求发送到HTTP服务器，服务器的IIS解析脚本返回结果后Flashplayer便可以正确的处理这些数据了。(废话一堆)当然如果你清楚了路径的关系，也可以把写load("loaddata.asp")写到Flash里，上传的时候，把.asp .swf 和包含 .swf的html文件，都放在一个目录里就行了。特别指出的是swf 在取得路径时，是取包含他的html和.asp的关系的。而不是 swf 与 asp的路径关系。说起来已经是有一点晕了，但如果理解了路径的关系，那就非常简单了。好了，进入正题，虽然输入HTTP路径就可以正确读取数据，但是在程序开发测试阶段可能经常需要开发者更换服务器，那样就对我们造成了一定的麻烦，你每更换到另外一个服务器上面的时候就要修改一次他的HTTP路径，如果读取了N(N≠0)个文件，难道还要手动修改N次？当然不是，那么通过下面这个小技巧便可以轻松解决这个问题：把SWF文件嵌入到一个ASP页面里面，输入如下代码：<%Dim PageUrl,URLarry,i,ApplicationURLPageUrl="http://" & Request.ServerVariables("http_host") & Request.ServerVariables("url")Response.Write "PageURL="&PageUrlURLarry=Split(PageUrl,"/")Arryubound=ubound(URLarry,1)-1For i=0 to ArryuboundApplicationURL=ApplicationURL&URLarry(i)&"/"NEXTResponse.Write "<br>ApplicationURL="&ApplicationURL '这一句仅仅是测试代码是否正确，可省%>好了，对ASP有一定了解的朋友应该都明白代码是什么意思了，PHP也可以用这种思路来写，下面在SWF路径中可以这样写 <%="flash.swf?myserver="&ApplicationURL%> 这样就可以通过URL把变量传递给SWF文件，在Flash影片中便可以直接访问这个变量了，就是_root.myserver。 好的，现在来让我们测试一下结果，先编写一个loaddata.asp，让他返回一个back变量。打开FLASH，新建一个文件。然后在场景中拖入两个动态文本框，分别命名为txt.url 然后在第一帧输入以下代码：mytxt=new LoadVars()mytxt.load(_root.myserver+"loaddata.asp")mytxt.onLoad=function(sUCcess){if(success){
最新发布
利用Dreamweaver CS3定制网页过渡功能
输入完后单击确定，存盘。这样当我们点击一个超链接进入这个页面时就可以看到效果了。另外还有二十多种效供你选择，只要将Transition的值改为相应的效果的代号即可，具体效果和设置如下表所示：
在Dreamweaver 中控制页面元素的显示定位
建立主菜单栏新建页面，执行菜单“Insert/Table”命令打开“Insert Table”对话框，插入一个一行多列的表格，表格列数由你的菜单条目决定，同时设置“Cell Padding”、“Cell Spacing”以及“Border”参数(如图1)。在建立的表格中输入主菜单导航文字，选取表格及文字后，用快捷键“Ctrl+F3”打开其属性窗口，我们可以定义一个字体控制CSS来控制文字属性，调整相关参数。 CSS实现相对定位菜单栏定义一个CSS相对定位的定义控制，将相对定位模型(菜单栏表格)定义为这个CSS属性。使浏览器以相对定位模型左上角作为原点，建立新的坐标系。再在这个相对定位模型下级插入层，使之相对于该相对定位模型定位。使用CSS控制后再在表格中插入的层是不可拖动的，改变其位置可以直接在其属性面板上输入L、T的参数值。 打开“CSS Styles”面板，点击“New Style”按钮，在弹出“New Style”窗口中定义一个名称为.pos的CSS属性，并且选择“Make Custom Style”的“Type”类型和“This Document 0nl”的“Define”类型，“确认”进入“Style Defintion For .pos”窗口，选取“Positioning”定义Type为“Relative”确定。选取菜单栏表格，将该CSS控制添加到菜单栏所在的表格中。使该相对定位模型(表格)建立新的坐标系，只要我们在其中插入下拉菜单层，并设置层内容和主菜单的鼠标响应事件就可以使下拉菜单精确定位了。 插入菜单栏目光标移入表格第一列，执行菜单“Insert/Layer”命令插入一个新层，作为“菜单一”的下拉菜单，点击层内部，执行“Insert/Table”命令，设定该表格行数、列数，并将表格线宽度设为“0”，表格底色为喜好颜色，输入菜单项目文字，设定文字CSS控制效果，并调整菜单大小。以同样的方式做出其他下拉菜单图层效果。 设置层属性和鼠标响应事件分别选中层Layer1、Layer2、Layer3、Layer4，在其属性窗口中把“Vis”项改为“Hidden”，把这4个层隐藏。 选择主菜单中的“菜单一”，用快捷键“Shift+F3”打开“Behaviors”行为窗口，单击“+”按钮，执行菜单“Show-Hide Layers”命令，于弹出窗口中选择“Layer‘Layer1’”，点击“Show”按钮，然后设置其两层为“Hide”。该动作表示把“Layer1”显示，而其他层均隐藏。最后点击“Behaviors”窗口“Events”下刚才定义的行为右侧的箭头，于弹出菜单中选择“onMouseOver”鼠标响应事件。 同样的方法制作出其他下拉菜单效果，当你“F12”预览时，就会发现即使分辨率改变，该下拉菜单层的位置也不会改变。
使用Dreamweaver CS3制作增强的邮件地址超级链接
按钮。 2、 系统弹出对话框，填入相应的参数。 Enter Link Text：E-mail超级链接的文字。 Enter Email：链接对应的Email地址。 Subject：邮件的标题。 CC：抄送地址。 BCC：暗送地址。 Message：邮件里的信息。
如何在Dreamweaver CS3中制作细线表格
入表格的对话框，参数设置如图(带红框项为固定值，否则无效果)： 选中表格，在属性面板中设置表格的背景颜色： 光标定位到第一个单元格里，按住Shift键单击最后一个单元格，全选所有单元格，然后在属性面板中设置所有单元格的颜色： 完成后效果如图： 2.利用表格的暗边框(bordercolordark)和亮边框(bordercolorlight)属性做的细线表格： 还是按Ctrl+Alt+T插入表格，在对话框中设置如图(带红框项为固定植，否则无效果) 选中表格后按F9，展开"Tag Inspector"面板组，在"Attributes"面板中设置如图： 完成后如图： 3.设置表格的CSS属性border-collapse为collapse：按Ctrl+Alt+T插入表格，对话框的设置同法2。选中表格，在属性面板中设置表格的边框颜色： 按F9展开"Tag Inspector"面板，在"Attributes"面板中的"style"里填入"border-collapse:collapse;
基础（8）标准的网页一屏到底是多大？
网站设计时，有一个最常用的指导性原则：页面长度原则上不超过3屏，宽度不超过1屏。这个原则明显是从用户的体验出发，特别是宽度不超过一屏，其最基本的表现是浏览器不出现横向滚动条，这几乎是目前的设计准则。那么这里的一屏到底是多大呢？普通用户通常浏览网页时，其浏览网页的有效面积会受到下面几个方面的影响：1. 显示器的分辨率这个由科技发展和用户购买力及喜好决定，其数据取决于统计。2. 操作系统毫无疑问目前是Windows的天下，其中WindowsXP占绝大多数。3. 网页浏览器IE依旧份额最高，但是Firefox、Opera和Safari等也有一定市场。4. 个人定制主要是用户定制操作系统的样式、操作系统任务栏是否隐藏和浏览器的样式，但是总体上这部分应该属于高级用户，绝大部分用户依旧会使用操作系统和浏览器的默认样式。 下面是关于浏览器和屏幕分辨率的统计数据：W3Counter于2006.11.12发布的全球统计数据某知名站点2006年10月份的数据由上面的数据可以得出：1. 基本上用户分辨率都在800×600以上，绝大部分都在1024×768以上，从全球情况来看，800×600的分辨率会越来越少。2. 国内浏览器依旧是IE6的天下，这将会持续较长的时间。从全球市场来看，国内的Firefox2.0和IE7会逐步增长，特别当IE7的中文版推出和Windows自动更新的推广开始以及随Vista上市，IE7增长会更快。 所以计算一屏大小应基于以下原则：1. 一屏指绝大部分用户的浏览器显示网页的有效可视区域。2. 一屏的计算环境是Windows XP和浏览器均处于默认样式。3. 由于IE无论是否超过一屏都存在纵向滚动条的位置，Firefox和Opera是在页面超过一屏的时候出现纵向滚动条，且浏览绝大部分网页都有纵向滚动条的存在，所以一屏大小的计算都基于浏览器有纵向滚动条的状态下。4. 由于Firefox2.0在只浏览一个网页时不出现多窗口的控制栏，而其它的多窗口浏览器都出现多窗口控制栏且使用时都会同时浏览多个网页，所以一屏大小在Firefox中指多窗口的控制栏存在时。 下面是基于上面的原则得到常用浏览器和分辨率下的的数据结果：关于上面数据的解释和一些其他事实：1. 在800×600分辨率和Windows XP下定制Windows的经典样式IE6的有效可视区域是780×445，Windows98、Windows 2000和Windows2003均采用经典样式切IE5.0、IE5.5、IE6.0的布局上相似，所以相同分辨率下应该比Windows XP默认的样式要大。2. 知道浏览器型号和屏幕的分辨率能够很容易的推算出可视区域面积，比如1024×768下IE7.0的可视面积是（1024-21）×（1024-148） 综合上面所有的数据，结论如下：1. 最保守而最有兼容性的一屏大小是：779×4322. 最广泛的一屏大小是：1003×6003. 适合目前国内的情况，一屏大小是779×600
基础（9）Dreamweaver CS3 For ASP开发：认识Access数据库
Microsoft Office Access（前名 Microsoft Access）是由微软发布的关联式数据库管理系统。它结合了 Microsoft Jet Database Engine 和 图形用户界面两项特点，是 Microsoft Office的成员之一。我们在使用Adobe Dreamweaver CS3开发ASP程序之前必须先认识一下Access数据库。因为通常我们使用Adobe Dreamweaver CS3开发中小型网络程序的时候经常会使用Access来作为首选收据库来搭配开发。Microsoft Access在很多地方得到广泛使用，例如小型企业，大公司的部门，和喜爱编程的开发人员专门利用它来制作处理数据的桌面系统。它也常被用来开发简单的 WEB应用程序．这些应用程序都利用ASP技术在Internet Information Services运行．比较复杂的WEB应用程序则使用PHP/MySQL或者ASP/Microsoft SQL Server．首先我们来看看Access的工作界面。选择文件菜单新建一个数据库选择空数据库后保持到你所需要的目录。保存后你将会见到ACCESS数据表设计界面
基础（10）如何在Adobe Dreamweaver CS3中快速插入iframe框架
iframe框架，虽然在浏览器兼容性上谈不上非常友好，但它的应用的确广泛。我们可以将它嵌在网页中的任意部分，这样对于提高网页排版的灵活性还是非常有好处。当然，iframe相关代码的书写还是令许多人头痛的，今天我们就通过 Dreamweaver的标签选择器来插入一个iframe框架，不需要你手工写一句代码的方法。启动Dreamweaver CS3点击菜单“插入”→“标签”，进入“标签选择器”。鼠标在左侧标签分类列表中依次选择“标记语言标签”→“HTML标签”→“页元素”，在右侧标签列表中选择“iframe”，点击“插入”按钮完成。Dreamweaver CS3会自动转入“标签编辑器”，接下来，忘记烦人的手工书写代码吧，你要做的就是根据提示填写所需的iframe参数。如果你对于某些选项还不是非常熟悉，可以点击对话框下的“标签信息”，Dreamweaver CS3内容详尽的标签帮助应该可以给你权威的解释。
基础（11）如何用Dreamweaver CS3合理优化您的网页
我们为了优化网页、加快网页下载速度，除了对图片进行优化之外，还需对网页其他各个元素进行优化。在网页编织过程中如能充分利用编辑工具，也可以在网页制作中达到优化目的。 下面是Dreamweaver CS3中的一些优化技法: 合理调用CSS 进行网页设计时，运用样式表单CSS来对页面元素进行布置，可以大大地减少HTML代码，这点我们已经很清楚。 方法: (1)是选定对象，从右键菜单中选择定义好的样式加入;(2)是从样式面板中为对象选择样式; (3)是在标签选择器上的某标签上单击右键选择样式。 这三种方法虽然获得的页面效果一样，但由于第一种方法会在HTML代码中产生一个“span”标签，如果过多地使用必定会使网页源文件大大增肥，影响下载速度。因此调用CSS时，应采用第二、第三种方法。 为服务器减负 在交互网页中，用户常用表单向服务器提交数据，等待服务器的数据处理、返回浏览器……等待的过程是很令人心烦的。为此，我们在进行网页编辑时，也有必要为服务器作个考虑。Dreamweaver CS3中制作网页，能为服务器减负的工作有一项做得较出色，就是对用户所提交的表单的合法性进行验证，只需在浏览器端进行，不必返回到服务器验证，既减轻了服务器的负担，又让浏览者少一份伤心的等待。 方法:选中表单，打开“行为”面板，点击“+”号选“验证表单”，然后进行设置即可。顺便提醒，这个验证过程实际上是使用JavaScript在浏览器端作验证。在Dreamweaver CS3里进行上述操作时，它会把这段JavaScript代码放在网页头部与之中，这样必定会使页面的完全显示时间变长，因为浏览器要先下载这段代码才下载其他页面元素。因此，最好在Dreamweaver CS3中打开代码编辑器，把这段脚本程序剪贴到源代码的最后边，让其在最后下载。另外，我们在为网页加入JavaScript脚本特效时，你如果不希望页面出现时马上生效，也不妨这样设置。 自我“减肥” 目前网页“减肥茶”很多，我们随处都可找到，而在Dreamweaver CS3中，我们不必四处找“减肥茶”，利用其自身的“减肥”功能足可以使网页“苗条怡人”。 方法:在“命令”菜单下选择“清除多余的HTML”，即可进行设置对网页冗余代码进行清除。 合理应用表格 我们不但要为服务器减负，对使用的浏览器我们更需要减负，也就是要尽可能地缩短浏览器对页面的解析时间，上面提及的JavaScript脚本加入就是一个例子。影响浏览器对页面解析的还有表格，因为浏览器对表格的解析时间与表格的大小、复杂程度成正比，而我们在Dreamweaver CS3中为了版式的安排，都是通过加入大量的表格来进行定位的，有些人甚至在大表格中套入多重的小表格，这实质上也是在加大浏览器的负担，使页面呈现时间大大加长。为此在使用表格时，应尽量将表格打散，并要尽可能地避免表格的层层相套。
基础（12）Dreamweaver CS3中如何创建自定义代码片段
Adobe Dreamweaver CS3作为网页制作的辅助工具之一，已经被人们逐渐掌握并灵活使用，它本身集成了好多实用的东西，例如自定义代码片段。其实很简单，在右栏中找到“代码片段”（Shift+F9），空白处右键“新建代码片段”（或先“新建文件夹”）接下来把你常用的代码片段输入进去。输入好后确定，有几个生成几个。以后要做的就是，当你用到这些代码片段的时候，打开“代码片段”，双击你命名的那“片”就好了。当然如果你有其他需要那么你就来这里定义你自己的代码片段吧！