推荐阅读
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中创建和管理收藏资源列表
将资源添加到收藏列表 请执行下列操作之一： 在“资源”面板的“站点”列表中选择一个或多个资源，然后单击“添加到收藏夹”按钮 。 在“资源”面板的“站点”列表中选择一个或多个资源，右键单击 (Windows) 或按住 Ctrl 单击 (Macintosh)，然后选择“添加到收藏夹”。 在“文件”面板中选择一个或多个文件，右键单击 (Windows) 或按住 Ctrl 单击 (Macintosh)，然后选择“添加到收藏夹”。Dreamweaver 会忽略在“资源”面板中没有对应类别的文件。 右键单击 (Windows) 或按住 Ctrl 单击 (Macintosh)“文档”窗口的“设计”视图中的一个元素，然后选择上下文菜单命令将该元素添加到“收藏”类别。 文本的上下文菜单中包含“添加到颜色收藏夹”或“添加到 URL 收藏夹”菜单项，具体取决于文本是否附加有链接。只能添加与“资源”面板中的某个类别相匹配的那些元素。将新颜色或 URL 添加到收藏列表 在“资源”面板中，选择“颜色”或“URL”类别。 选择面板顶部的“收藏”选项。 单击“新建颜色”或“新建 URL”按钮 。 请执行下列操作之一： 使用颜色选择器选择一种颜色，然后根据需要为该颜色指定一个别名。 若要在不选择颜色的情况下关闭颜色选择器，请按 Esc 或单击颜色选择器顶部的灰色条。 在“添加 URL”对话框中输入 URL 以及别名，然后单击“确定”。 从收藏列表删除资源 在“资源”面板的顶部选择“收藏”选项。 在“收藏”列表中选择一个或多个资源（或一个文件夹）。 单击“从收藏中删除”按钮 。 资源将从“收藏”列表中删除，但“站点”列表中仍会保留这些资源。如果删除某个“收藏夹”，则该文件夹及其包含的所有内容都会一同删除。 为收藏资源创建别名 只能在“收藏”列表中为资源指定别名（例如，指定 PageBackgroundColor，而不是 #999900）。“站点”列表保留其实际文件名（对于颜色和 URL，则保留实际值）。 在“资源”面板（“窗口”>“资源”）中，选择包含您的资源的类别。 选择面板顶部的“收藏”选项。 请执行下列操作之一： 在“资源”面板中右键单击 (Windows) 或按住 Ctrl 单击 (Macintosh) 资源的名称或图标，然后选择“编辑别名”。 单击一次资源的名称，暂停，然后再次单击该名称。（不要双击资源名称，双击操作将打开资源进行编辑。） 为该资源键入别名，然后按 Enter (Windows) 或 Return (Macintosh)。将资源归类到收藏夹中 将资源放入“收藏夹”并不会更改资源文件在磁盘上的位置。 在“资源”面板的顶部选择“收藏”选项。 单击“新建收藏夹”按钮 。 为该文件夹键入一个名称，然后按 Enter (Windows) 或 Return (Macintosh)。 将资源拖动到该文件夹中。
将可视化助理与非 CSS 布局块元素一起使用
保存此文件。 在“设计”视图中，打开要附加新样式的页面。 选择“文本”>“CSS 样式”>“设计时间”。 在“设计时间样式表”对话框中，单击“只在设计时显示”文本框上方的加号 (+) 按钮，选择刚才创建的样式表，然后单击“确定”。 单击“确定”以关闭“设计时间样式表”对话框。 样式表将附加到文档中。如果使用上面的示例创建了样式表，则会使用 display:block 属性对所有段落和列表项目进行格式设置，从而允许对段落和列表项目启用或禁用 CSS 布局块可视化助理。
清除浮动的最佳方法
ul{ list-style:none; height:auto; margin:0;p adding:0; background-color:#436973; } li{ float:left; width:80px; height:80px; background-color:#83B1DF; } .demo{ clear:both; border:1px solid #FF00FF; margin-bottom:5px; } .overflow{ overflow:auto; zoom:1; background-color:#43FF73; } ul{ list-style:none; height:auto; margin:0; padding:0; background-color:#436973; } li{ float:left; width:80px; height:80px; background-color:#83B1DF; } .demo{ clear:both; border:1px solid #FF00FF; margin-bottom:5px; } .overflow{ overflow:auto; zoom:1; background-color:#43FF73; } HTML代码<div class="demo"> <ul class="overflow"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> <div class="demo"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div> 其中zoom是为了IE6准备的。 注：忘了一个很重要的内容，并不是所有的overflow属性都可起来一样的效果，比如visible属性就只能对IE起作用。例子可以看这里Demo2 这样的话就有一个问题啦，如果要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案：对于IE6及以下版本的IE，可以直接定义高度；对于IE7、FF、OP，可定义min-height。 CSS代码overflow { height:auto; _height:200px; min-height:200px; verflow:auto; zoom:1; _overflow:visible; }
利用Adobe Dreamweaver CS3快速批处理图像链接
首先启动Dreamweaver，建立好站点后，选择命令 > 创建网站相册。然后在相册标题后的文本输入框中输入相册的名称。输入副标题或其他标题。接下来选择好源图像文件夹和目标文件夹，点击确定。确定后将会启动Fireworks CS3进行缩略图的处理处理完成后在Dreamweaver CS3中会提示相册已经建立。
如何利用DIV+CSS 2.0实现文字阴影
这个效果的兼容性还是不错的。* Firefox 2.0.0.4 * Internet Explorer 6.0 * Mozilla 1.7.13 * Opera 9.21 * Netscape 8.0.4该效果以上的所有浏览器。在贴代码之前大家先这里看看效果。 Text with shadow using CSS Text with shadow using CSS html, body { margin: 0px; padding: 0px; } body { background-color: #DDDFD7; font-family: Verdana, Arial, sans-serif; font-size: 11px; text-align: center; } #wrapper { width: 700px; height: 200px; margin: 20px auto 20px auto; padding: 0px; text-align: left; position: relative; border: solid 1px #fff; } .firstlayer { font-size: 18px; font-weight: bold; color: #fff; position: absolute; top: 20px; left: 20px; z-index: 1; } .secondlayer { font-size: 18px; font-weight: bold; color: #aaa; position: absolute; top: 22px; left: 22px; z-index: 0; }
Adobe Dreamweaver CS3选择性粘贴的妙用和其他小技巧
二、当有浏览者使用其他非IE浏览器浏览页面时，在改变窗口大小的时候页面会花掉。在制作网页时就应该考虑到这个问题，可以通过点击“Command→Add/Remove Netscape resize fix”来加以解决，它可以使在Netscape中浏览页面时，改变窗口大小的时候页面不会花掉。 三、仅仅拷贝文字。当我们从Adobe Dreamweaver CS3 中拷贝文字到另一个应用程序的时候，HTML代码和文字一起被拷贝过去了。一般我们都用快捷键Ctrl+C来拷贝， 如果在拷贝的时候多按一个“C”键则只拷贝选中的文字。 四、在Adobe Dreamweaver CS3 中输入空格是一件令人很头痛的事。如果你按下面的方法操作就会简单多了:先将“中文输入法”转换成全角状态，然后同时按下键盘上的Shift+Ctrl+space就可以插入一个空格(可以连续输入)。 五、library组件和template模板不用上传服务器，就可以正确预览使用了该组件或模板的页面。 六、不要在同一个页面同时使用表格和层来布置，在Netscape中会导致混乱，从属关系除外。 七、一次链接到两个网页。我们都知道超级链接一次只能连到一个页面。如果你要想一次在不同的框架页中打开文档，可以使用“Go To URL”JavaScript 行为。打开一个有框架的网页，选择文字或图像，然后从行为面板中选择“Go To URL”。你会注意到Adobe Dreamweaver CS3 会在“Go To URL”对话框中显示所有可用的框架。选择其中一个你想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。
在Adobe Dreamweaver CS3中制作滚动字幕
今天我们来详细解读一下关东字幕的设置和标签的用法。滚动字幕在FrontPage的组件里有，但是FrontPage这个软件只能支持单行文字，一出现多行文字它就无能为力了，而且它只能支持一行滚动!。其实marquee的设置还是很灵活的。大家看下面的代码： <marquee scrollAmount=2 width=300>滚动字幕</marquee> 参数详解： a)scrollAmount。它表示速度，值越大速度越快。如果没有它，默认为6，建议设为1～3比较好。 b)width和height，表示滚动区域的大小，width是宽度，height是高度。特别是在做垂直滚动的时候，一定要设height的值。 c)direction。表示滚动的方向，默认为从右向左：←←←。可选的值有right、down、up。滚动方向分别为：right表示→→→，up表示↑，down表示↓。 d)scrollDelay，这也是用来控制速度的，默认为90，值越大，速度越慢。通常scrollDelay是不需要设置的。 e)behavior。用它来控制属性，默认为循环滚动，可选的值有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，然后停止滚动) 如何给滚动字幕加超链接?这跟平时的超链接是完全一样的。只要在文字外面加上，其实也很简单。代码如下： <marquee scrollAmount=2 width=300><a href=http://www.adobe-dreamweaver.cn>Adobe Dreamweaver CS3 中文技术交流中心</a></marquee> 如何制作当鼠标停留在文字上，文字停止滚动?代码如下： <marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>文字内容</marquee>
用Dreamweaver CS3 + CSS制作斑马线效果
我们看到上面的代码所表现出来的是每行的CLASS都不一样，通过这样的方式的确可以解决隔行换色的问题，但是都被程序员告知这样写法程序没办法写。 这种设想在网页标准研究联盟中得到了反驳，认为样式的事没必要用行为去实现，并且用JS来实现的效果并不一定有CSS来解决的好。但这种效果实践后发现，可以用大背景实现。什么叫大景实现呢，意思就是说通过在父级设定背景从而使得当前级得到隔行换色或是隔N行换N色。 上图是一个实例应用，大家可以看到采用的是两行背景重复。而这个背景图是定义在UL上的而不定义在LI上。这样又使得我们少写一点代码，让代码显得更加的干净。同时这样技巧通过举一反三的思考就能做出更多很好玩的样式来，比如我们让每一行都不一样，或是让每一行都像是纸页脚卷起来一样，或是其它的什么花样，那就要看你能想出什么样的花招来了!
使用Dreamweaver CS3 制作拖拽层效果
好了，重要的一步来了。点击“窗口/动作”，会弹出“动作(Behaviors)”对话框来。点击对话框上方的“+”号后，会再弹出一个菜单，选择此菜单中的“Drag Layer”，接着再弹出的，就是“Drag Layer”对话框了。 重复上述步骤，分别设置好其他几个图层的属性，设置好的“Behaviors”对话框的中间文本框中多出了4个“onLoad”标记。 好了，设置完这些，我们的工作也完成了，别忘了保存网页，然后按下“F12”键，看看你做的拖动页面酷不酷？
用你的Dreamweaver CS3处理Word文档
上图中已经大概把这个面板的功能模块说了一下。不是很复杂，假如大家有不明白的地方，请点击面板上的帮助。在这里，参数设置如上图，然后点击替换全部。就完成了这个文档的处理。假如各位对TD的width属性不太满足，也可以用此方法，将它们全部删除。至此，处理工作全部完成。我们成功的把一个50多K的文档缩小到不到3K，并且也可以更方便地将它粘贴到我们要应用的页面中了。 查找与替换似乎是小儿科的东西，其实它的功能非常强大。大家在以后做网站的时候，假如碰到一个站点中有很多文件的某一个标签都需要修改，只要找到它们相同的规律便可以利用它来成批替换。还有高级文本的方式也不要忽略，都是些相当有用的工具。