推荐阅读
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){
最新发布
HTML 和 XHTML的区别
这篇文章主要阐述 HTML 和 XHTML 的区别。简单来说,XHTML 可以认为是 XML 版本的 HTML,为符合 XML 要求,XHTML 语法上要求更严谨些。以下是 XHTML 相对 HTML 的几大区别:XHTML 要求正确嵌套 XHTML 所有元素必须关闭 XHTML 区分大小写 XHTML 属性值要用双引号 XHTML 用 id 属性代替 name 属性 XHTML 特殊字符的处理XHTML 要求正确嵌套以下是正确的嵌套:
Iframe中各个元素的用法
释成“浏览器中的浏览器“很是恰当<iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src="move-ad.htm"></iframe><iframe>用于设置文本或图形的浮动图文框或容器。border<iframe border="3"></iframe>设定围绕图文框的边缘宽度frameboder<iframe frameboder="0"></iframe>设置边框是不否为3维(0=否,1=是)height,width<iframe height="31" width="88"></iframe>设质边框的宽度和高度scrolling<iframe scrolling="no"></iframe>是否有滚动条(yes,no,auto)src<iframe src="girl.gif"></iframe>指定iframe调用的文件或图片(html,htm,gif,jpeg,jpg,png,txt,*.*) 注意事项:一个浮动框架不需要通过<frameset>元素声明为框架设置的一部分;
名词解释:Unicode和UTF-8
一直在编码方面要求不是很高,所以对Unicode和UTF-8也不甚了解。 最近偶然翻到一篇UTF-8的文章,感觉解释的非常繁杂,因此才想到重新写一篇简单易懂一点的。 首先说明一下现在常用的一些编码方案: 1、在中国,大陆最常用的就是GBK18030编码,除此之外还有GBK,GB2312,这几个编码的关系是这样的。最早制定的汉字编码是GB2312,包括6763个汉字和682个其它符号95年重新修订了编码,命名GBK1.0,共收录了21886个符号。之后又推出了GBK18030编码,共收录了27484个汉字,同时还收录了藏文、蒙文、*文等主要的少数民族文字,现在WINDOWS平台必需要支持GBK18030编码。按照GBK18030、GBK、GB2312的顺序,3种编码是向下兼容,同一个汉字在三个编码方案中是相同的编码。 2、*,香港等地使用的是BIG5编码 3、日本:SJIS编码 如果把各种文字编码形容为各地的方言,那么Unicode就是世界各国合作开发的一种语言。 在这种语言环境下,不会再有语言的编码冲突,在同屏下,可以显示任何语言的内容,这就是Unicode的最大好处。 那么Unicode是如何编码的呢?其实非常简单。 就是将世界上所有的文字用2个字节统一进行编码。可能你会问,2个字节最多能够表示65536个编码,够用吗? 韩国和日本的大部分汉字都是从中国传播过去的,字型是完全一样的。 比如:“文”字,GBK和SJIS中都是同一个汉字,只是编码不同而已。 那样,像这样统一编码,2个字节就已经足够容纳世界上所有的语言的大部分文字了。 Unicode的学名是"Universal Multiple-Octet Coded Character Set",简称为UCS。 现在用的是UCS-2,即2个字节编码,而UCS-4是为了防止将来2个字节不够用才开发的。UCS-2也称为基本多文种平面。 UCS-2转换到UCS-4只是简单的在前面加2个字节0。 UCS-4则主要用于保存辅助平面,例如Unicode 4.0中的第二辅助平面 20000-20FFF - 21000-21FFF - 22000-22FFF - 23000-23FFF - 24000-24FFF - 25000-25FFF - 26000-26FFF - 27000-27FFF - 28000-28FFF - 29000-29FFF - 2A000-2AFFF - 2F000-2FFFF 总共增加了16个辅助平面,由原先的65536个编码扩展至将近100万编码。 那么既然统一了编码,如何兼容原先各国的文字编码呢? 这个时候就需要codepage了。 什么是codepage?codepage就是各国的文字编码和Unicode之间的映射表。 比如简体中文和Unicode的映射表就是CP936,点这里查看官方的映射表。
一种简洁的选项卡效果代码
选项卡原身是Windows操作系统的一个创意,即通过交换选项,让很多项目信息轮替显示在大小和位置都固定的小块区域里。因此选项卡具有占用篇幅小,辐射内容大的特点。一个典型的例子是你打开IE浏览器,依次点击“工具”-“Internet选项”,这个表单就是一个选项卡典型布局。当然了,这里所说的选项卡效果是要在Web页面实现的,并非应用程序里的菜单选项,在网页中应用选项卡可以使网页显得更紧凑,结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍一种简洁的选项卡效果的实现,兼容性较好,方便大家直接使用。 <style type="text/css"> body { margin:0px; text-align:center; font-size:12px; } #divall { margin:auto; margin-top:35px; width:300px; height:200px; background-color:#7DA7D9; border:0px; } #title { width:300px; height:20px; font-size:14px; margin-top:4px; } #table1 table { width:300px; height:30px; font-size:12px; } #table2 table { width:300px; height:30px; font-size:12px; } #content1,#content2,#content3,#content4,#content5,#content6,#msg1,#msg2 { margin:auto; height:110px; width:290px; background-color:#eee; position:relative; } #content1 div,#content2 div,#content3 div,#content4 div,#content5 div,#content6 div { position:absolute; bottom:3px; right:3px; cursor:pointer; } a { text-decoration:none; } .changebordercolor { border-top:1px solid #369; border-left:1px solid #369; } .backbordercolor { border:0px solid red; } </style> <script language="javascript"> function msg(){ document.getElementById("msg1").style.display="none" document.getElementById("msg2").style.display="none" } function msgnone(ms,cont){ document.getElementById(ms).style.display='block' document.getElementById(cont).style.display='none' } function aa1(){ document.getElementById("content1").style.display="block" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa2(){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="block" document.getElementById("content3").style.display="none" document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa3(){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="block" document.getElementById("content4").style.display="none" document.getElementById("content5").style.display="none" document.getElementById("content6").style.display="none" } function aa4(){ document.getElementById("content1").style.display="none" document.getElementById("content2").style.display="none" document.getElementById("content3").style.display="none" do [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
加快HTML网页速度的10个技巧
减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时,就可以考虑将这些公用部分单独分离出来。比如:我们可以将多个HTML页面都用到的脚本程序编写成独立存在的.js文件,然后再在页面中按如下方式调用它: 这样,公用文件只需要下载一次,然后就进入缓冲区。等下次再次调用包含公用文件的html页面时,下载时间明显减少。 让样式表内容进入地下工作 CSS是HTML装扮器,一个漂亮的Web页面不可能没有它。HTML页面中有多种引用CSS的方法,不同的方法导致的效率也不一样。通常,我们可以将定义于<style></style>间的样式控制代码提取出来,保存到单独的.css文件中,然后在HTML页面中以<LINK>标记或者@import标记的方式进行引用: 请注意2点:1、.css文件中无需包括<style>标记;2、@import和LINK标记要定义在HTML页面的HEAD部分。 宝贵内存节省两法 尽量减少HTML页面占用的内存空间是加快页面下载速度的一个有效方法。在这方面,有2个需要注意的问题: 1、使用同一种脚本语言
robots.txt知识详解
robots.txt基本介绍 robots.txt是一个纯文本文件,在这个文件中网站管理者可以声明该网站中不想被robots访问的部分,或者指定搜索引擎只收录指定的内容。 当一个搜索机器人(有的叫搜索蜘蛛)访问一个站点时,它会首先检查该站点根目录下是否存在robots.txt,如果存在,搜索机器人就会按照该文件中的内容来确定访问的范围;如果该文件不存在,那么搜索机器人就沿着链接抓取。 另外,robots.txt必须放置在一个站点的根目录下,而且文件名必须全部小写。 robots.txt写作语法 首先,我们来看一个robots.txt范例:http://www.csswebs.org/robots.txt 访问以上具体地址,我们可以看到robots.txt的具体内容如下: # Robots.txt file from http://www.csswebs.org # All robots will spider the domain User-agent: * Disallow: 以上文本表达的意思是允许所有的搜索机器人访问www.csswebs.org站点下的所有文件。
XHTML基础教程(一)
什么是HTML?简单点说:HTML是用来做网页的。它很简单,在接下来的1~2分钟之内你就会跟着我用HTML做一个简单的网页。 复杂点说:HTML(HyperTextMarkupLanguage的缩写),即超文本链接标记语言。它是在互联网发布超文本文件(通常所说的网页)的通用语言。 什么是XHTML?更先进难懂的技术? 简单点说:X是吓唬人的,其实XHTML就是严谨而准确的HTML。如果说HTML是汉语,那么XHTML就是标准普通话。对于现在才刚刚开始学习网页设计的朋友,直接学习XHTML是最佳的选择。 复杂点说:XHTML是HTML的“升级”产品。事实上它也属于HTML家族,对比以前各个版本的HTML,它具有更严格的书写标准、更好的跨平台能力。由于某些需要,XHTML将以前版本的HTML能够实现的一些功能交给了CSS,这意味着你将需要学习两种技术。但是这确实是Web未来发展的潮流。X代表“可以扩展的”。 学习XHTML的基础 学习XHTML不需要任何基础。相反,XHTML是学习学多其他知识的必要基础。有些人可能听说需要学习完HTML才可以学XHTML,事实并非如此,菜鸟吧(cainiao8.com)的XHTML教程就是面向没有任何基础的网页设计新手的。如果你已经熟练的掌握了HTML,就不必看我们的入门教程了,我们为已经熟悉了HTML的站长准备了从HTML到XHTML。
解密.htm.html.shtm.shtml的区别与联系
每一个网页或者说是web页都有其固定的后缀名,不同的后缀名对应着不同的文件格式和不同的规则、协议、用法,最常见的web页的后缀名是.html和.htm,但这只是web页最基本的两种文件格式,今天我们来介绍一下web页的其它一些文件格式。 首先介绍一下html与htm 关于HTML,HTML(HyperTextMark-upLanguage)即超文本标记语言,是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标,Internet就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。 关于HTM,实际上HTM与HTML没有本质意义的区别,只是为了满足DOS仅能识别8+3的文件名而已,因为一些老的系统(win32)不能识别四位文件名,所以某些网页服务器要求index.html最后一个l不能省略。MSIE能自动识别和打开这些文件,但编写网页地址的时候必须是完全对应的,也就是说index.htm和index.html是两个不同的文件,对应着不同的地址。值得一提的是UNIX系统中对大小写敏感,不吻合的话就可能报没有文件或者找不到文件。 其次介绍一下shtml和shtm 关于shtml,shtml是一种基于SSI技术的文件,也就是Server Side Include--SSI 服务器端包含指令,一些Web Server如果有SSI功能的话就会对shtml文件特殊招待,服务器会先扫一次shtml文件看没有特殊的SSI指令存在,如果有的话就按Web Server设定规则解释SSI指令,解释完后跟一般html一起调去客户端。 关于shtm,shtm与shtml的关系和htm与html的关系大致相似,这里就不多说了。 html或htm与shtml或shtm的关系是什么 html或者htm是一种静态的页面格式,也就是说不需要服务器解析其中的脚本,或者说里面没有服务器端执行的脚本,而shtml或者shtm由于它基于SSI技术,当有服务器端可执行脚本时被当作一种动态编程语言来看待,就如asp、jsp或者php一样。当shtml或者shtm中不包含服务器端可执行脚本时其作用和html或者htm是一样的。
偷窥HTML与XML之间的秘密
偷窥HTML与XML之间的秘密 什么是HTML HTML的全拼是Hypertext Markup Language, 中文也就是超文本链接标示语言。HTML(HyperTextMark-upLanguage)即超文本标记语言,是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起,形成有机的整体,人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标,Internet就会马上转到与此图标相关的内容上去,而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。 什么是XML XML即Extentsible Markup Language(可扩展标记语言),是用来定义其它语言的一种元语言,其前身是SGML(标准通用标记语言)。它没有标签集(tag set),也没有语法规则(grammatical rule),但 是它有句法规则(syntax rule)。任何XML文档对任何类型的应用以及正确 的解析都必须是良构的(well-formed),即每一个打开的标签都必须有匹配的结束标签,不得含有次序颠倒的标签,并且在语句构成上应符合技术规范的要求。 XML文档可以是有效的(valid),但并非一定要求有效。所谓有效文档是指其符合其文档类型定义(DTD)的文档。如果一个文档符合一个模式(schema)的规定 ,那么这个文档是模式有效的(schema valid)。 HTML与XML之间的关系 1、其实HTML与XML之间没有非常必然的联系,XML不是要替换HTML,实际上XML可以视作对HTML的补充。 2、XML和HTML 的目标不同:HTML 的设计目标是显示数据并集中于数据外观,而XML的设计目标是描述数据并集中于数据的内容。 3、与HTML相似,XML不进行任何操作。虽然XML标记可用于描述订单之类的项的结构,但它不包含可用于发送或处理该订单以及确保按该订单交货的任何代码,其他人必须编写代码来实际对XML格式的数据执行这些操作。与 HTML 不同,XML 标记由架构或文档的作者定义,并且是无限制的。HTML 标记则是预定义的;HTML 作者只能使用当前 HTML 标准所支持的标记。 4、与 HTML 不同,XML 标记由架构或文档的作者定义,并且是无限制的。HTML 标记则是预定义的;HTML 作者只能使用当前 HTML 标准所支持的标记。
实用HTML文件的增强标记
近年来,超文本标识语言(HTML)得到了迅速拓展。为满足更多的需要,它增加了许多扩展功能。设计新颖、吸引人的网页已经越来越依赖java applet(小程序)、内嵌脚本、图文框、插件和其它扩展的HTML功能。这些扩展的HTML功能不仅可以对文本作进一步的格式化,而且可以嵌入程序、动画和其它交互式操作元素,将曾经是静态的主页转换成一幅新的美妙绝伦的画面,它可以任主页制作者充分发挥自己的想像力,设计出充满魅力的主页来。下面我就介绍几个用于增强HTML页面功能的超文本标记,这些标记正越来越多地用于网页设计中。 1.〈script〉标记〈script〉是用来标志javascript和vbscript编程的HTML标记,它的格式如下:〈script属性=属性值〉javascript或者vbscript程序源代码〈/script〉你可以在页面中插入任意多的〈script〉......〈/script〉标记块。〈script〉标记有多种属性(如event、for、language、src等),其中最常用的是language属性,它用来指定脚本的语言类型,如“javascript”或“vbscript”。2.〈applet〉标记〈applet〉标记是用来在页面中插入java小程序的专用标记,它有多种属性。〈applet〉标记的一般属性格式如下:〈applet属性=属性值〉〈/applet〉它的各种属性分别用来定义java小程序的路径、文件名、java applet小程序在页面中的位置、大小及运行参数等。3.〈object〉标记