推荐阅读
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){
最新发布
两分钟做个xhtml+css的网站首页
xhtml+css网站重构web标准等等之类的文章太多了,我就不重复了,发个最简单的制作xhtml+css页面的方法,方法虽然很简单,但真不一定有几个人知道.... 起码google搜索没搜索到。 开始吧: 1、打开photoshop cs2 ,打开设计出的网站首页。用切片工具切好。 图: 2、点 文件-》存储为web所用格式 快捷键为ctrl+alt+shift+s ,点右上倒三角的小图片,选择Edit output settings 图: 3、见图,在第二个下拉中选择 Slices,选择Generate CSS ,然后在后面的下拉中选By ID 图:
如何实现HTML页面地址栏参数传递与获取
我们知道,在服务器端asp程序可以接受html页面上的form传来的参数,那么,可不可以传递参数给html页面呢,也就是说在html后面加问号?答案是可以。 下面是javascript的一种实现方法, 这个函数是通过window.location.href中的分割符获得各个参数。 有了这个函数,就可以在页面之间传递参数了。
采用XHTML和CSS设计可重用可换肤网页
XHTML具有两大目标: 使用XHTML标准的好处是:只需设计页面一次,即可让该页以完全相同的方式在任何现代的浏览器中显示和工作。例如,在按照标准生成以后,页面在Internet Explorer、Mozilla Firefox、Netscape Navigator、Opera、Camino 和 Safari)中以相同的方式显示,而无需完成任何额外的工作。并且XHTML标准可以使 Web 站点更易于为智能手机、残疾人电脑等设备访问。 由于XHTML标准要求在在文档结构和表示形式之间创建更明显的分离。因此使用CSS样式表是必不可少的。CSS在网页中占着极重要的地位,它的使用一直是热门讨论的话题。CSS是Cascading Style Sheet的简写,译为“层叠样式表单”。 在1997年W3C颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后,又在1998年5月发布了CSS2版本。 CSS 的发明者的目的是除去表示性元素,即应该根据内容所表示的东西来标记内容,而样式表应该用于美化内容。而这一点与XHTML分离文档结构和表示形式的目标是一致,(在XHTML 2.0将除去b 、 i 和 img 标记(以及 big 、 small 和 tt ),甚至不赞成使用 br ,准备从将来的发行版中除去它。原因在于大多数标记都是表示性的。它们的唯一目的就是给予浏览器指令,规定有关其内容应该如何显示,但却完全未提供有关其内容是什么的信息。) 因此它们成了最好的合作伙伴。更多关于XHTML2.0的资料,请参见:http://www-128.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html CSS过去经常被用来定义字体的属性,而现在新标准中我们将用它来控制整个页面的显示。然而,我们必须需要做一些不同于以往的处理来适应这种新的变化,如:使用div来布局而不是表格,使用结构化、语义化的标记等等。由于采用新的处理方式,我们现在可以轻松地设计出可重用的CSS(同一个样式文件多个WEB站点中使用)以及可换肤的WEB站点(一个站点使用多种不同风格的样式)。 随着XHTML的逐渐推广流行,HTML 在许多场合已经显得过时。World Wide Web Consortium (W3C) 于 2000 年 6 月 26 日发布了 XHTML 的第一个版本作为推荐标准。XHTML 标准的目标是取代 html。按照 W3C 的说法,“XHTML 是 html 的继承者”(http://www.w3.org/MarkUp/)。 XHTML具有两大目标: 使用XHTML标准的好处是:只需设计页面一次,即可让该页以完全相同的方式在任何现代的浏览器中显示和工作。例如,在按照标准生成以后,页面在Internet Explorer、Mozilla Firefox、Netscape Navigator、Opera、Camino 和 Safari)中以相同的方式显示,而无需完成任何额外的工作。并且XHTML标准可以使 Web 站点更易于为智能手机、残疾人电脑等设备访问。 由于XHTML标准要求在在文档结构和表示形式之间创建更明显的分离。因此使用CSS样式表是必不可少的。CSS在网页中占着极重要的地位,它的使用一直是热门讨论的话题。CSS是Cascading Style Sheet的简写,译为“层叠样式表单”。 在1997年W3C颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1, 自CSS1的版本之后,又在1998年5月发布了CSS2版本。 CSS 的发明者的目的是除去表示性元素,即应该根据内容所表示的东西来标记内容,而样式表应该用于美化内容。而这一点与XHTML分离文档结构和表示形式的目标是一致,(在XHTML 2.0将除去b 、 i 和 img 标记(以及 big 、 small 和 tt ),甚至不赞成使用 br ,准备从将来的发行版中除去它。原因在于大多数标记都是表示性的。它们的唯一目的就是给予浏览器指令,规定有关其内容应该如何显示,但却完全未提供有关其内容是什么的信息。) 因此它们成了最好的合作伙伴。更多关于XHTML2.0的资料,请参见:http://www-128.ibm.com/developerworks/cn/xml/x-wa-xhtml/index.html
新手入门:XHTML DHTML SHTML的区别
XHTML DHTML SHTML,学习网站制作会经常看到这三种名词,又很少有文章将其做很详细的解释,在这篇文章里为大家进行一下整理了解一下其区别。 XHTML: HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。 2000年底,国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言,目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。下面是W3C的HTML工作组主席Steven Pemberton回答的关于XHTML的常见基础问题。 (1)XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点:不能适应现在越多的网络设备和应用的需要,比如手机、PDA、信息家电都不能直接显示HTML;由于HTML代码不规范、臃肿,浏览器需要足够智能和庞大才能够正确显示HTML;数据与表现混杂,这样你的页面要改变显示,就必须重新制作HTML。因此HTML需要发展才能解决这个问题,于是W3C又制定了XHTML,XHTML是HTML向XML过度的一个桥梁。 (2)XML是web发展的趋势,所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准,使用XHTML 1.0,只要你小心遵守一些简单规则,就可以设计出既适合XML系统,又适合当前大部分HTML浏览器的页面。这个意思就是说,你可以立刻设计使用XML,而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到XML。 (3)使用XHTML的另一个优势是:它非常严密。当前网络上的HTML的糟糕情况让人震惊,早期的浏览器接受私有的HTML标签,所以人们在页面设计完毕后必须使用各种浏览器来检测页面,看是否兼容,往往会有许多莫名其妙的差异,人们不得不修改设计以便适应不同的浏览器。 (4)XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。 (5)XHTML是Web标准家族的一部分,能很好在无线设备等其它用户代理上。 (6)在网站设计方面,XHTML可助你去掉表现层代码的恶习,帮助你养成标记校验来测试页面工作的习惯。 DHTML:
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是一样的。
什么是 XHTML?
XHTML是一系列当前和将来的文档类型和程序块,它由HTML 4 [HTML]再生和扩展而来,HTML 4是其子集。XHTML系列文档基于XML,最终被设计用来与基于XML的用户代理程序一起工作。XHTML家族的详情及其发展过程在未来趋势一节中详述。 XHTML 1.0(本规范书)是XHTML家族的第一个文档。它是将3种HTML 4文档类型应用到XML 1.0 [XML]之后重新形成的。其意图是,作为一种语言,它的内容既符合XML,并且如果依照一些简单的指导方针,也能被HTML4用户代理程序识别。开发者将它们的文档移植成为XHTML 1.0,会得到以下好处: XHTML文档遵从XML。这样,用标准的XML工具很容易查看,编辑和检验它们。 XHTML文档可以在现有的HTML4代理用户程序中使用,也可以在新的XHTML用户代理程序中使用,在后者中可以达到与前者同样或更好的效果。 XHTML 文档中使用的应用程序(如script 和 applet) 可以是HTML 的文档对象模型(Document Object Model) ,也可以是 XML 的文档对象模型 [DOM]。 随着 XHTML 家族的发展,遵从XHTML 1.0的文档更有可能运用在各种XHTML环境中。 XHTML家族是Internet发展的下一步。 将现在将文档移植成XML,开发者在确保他们的文档向前后兼容的同时,还能享有进入XML世界带来的好处。 什么是HTML 4? HTML 4 [HTML] 是SGML (Standard Generalized Markup Language) 的一个应用,遵从国际标准ISO 8879,被广泛的当作 World Wide Web上的标准出版语言。 SGML是一种描述标记语言,特别是那些用于电子文档交换,文档管理和文档发布语言的语言。HTML是SGML定义的语言的一个实例。
XHTML的标准定义
因为XHTML是XML的一个应用,一些在基于SGML的HTML 4中完全合法的习惯在XHTML中必须改变。 文档必须是编排良好的 编排良好性Well-formedness是[XML]引入的一个新概念。从本质上说,这意味着元素必须有结束标签,或者必须以特殊方式书写(在下面说明)。 元素必须嵌套,尽管SGML规定层叠非法,但现有的浏览器普遍允许层叠。 正确:嵌套元素。<p>here is an emphasized <em>paragraph</em>.</p> 不正确:层叠元素。<p>here is an emphasized <em>paragraph.</p></em> 元素和属性名必须小写 对所有HTML元素和属性名,XHTML 文档必须使用小写。 因为XML是大小写敏感的,所以这个差别是必须的。如 <li> 和 <LI> 是不同的标签。
HTML基础:标签属性和元素
尽管HTML的基础是纯文本,但我们还是需要多一些东西才能使纯文本文件变成合法的HTML文件。 标签 HTML基本的构成包含标签,标签围绕着内容,赋予内容某些意义。 按照下面改进你的文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> 这是我的第一个网页 </body> </html> 保存文件,回到浏览器界面和选择“刷新”(这会重新装载网页)。 网页的外观没有任何改变,HTML的目的是表达内容,而不是表达表现,这个例子现在已经定义了网页一定的基本元素。 第一行以<!DOCTYPE..开始是为了让浏览器知道你到底要做什么。你可能还不知道自己在做什么,但接受它很重要。如果你不这样做,浏览器将用“quirks”(奇怪的)模式来表现你的网页。现在还不必担心,当然你需要了解或者学习的话可以看看 HTML高级教成的 进一步学习“文档类型”。当前,只需要记住把这一行放在文件的顶端就可以了。 言归正传,<html>是隔开其他内容的起始标签,它告诉浏览器,位于自己与闭合标签</html>之间的就是是HTML文档。在<body>和</body>之间的是这个文档展示在浏览器上的主要内容。 闭合标签 </body>和</html>关闭他们各自的标签。所有的HTML标签都要关闭。尽管老版本的HTML允许某些标签不关闭,但最新的标准要求所有的标签都要关闭。无论如何,闭合标签是一个好习惯。
HTML基础:HTML字体标记及属性
我们在这里将要谈的是有关文字的标记,包括字体大小、颜色、字型...等变化,适当的应用可以增加页面的美观! 常用字体标记 如 : <H2> 标题 </H2> 如 : <B> 粗体字 </B> 粗体字 如 : <I> 斜体字 </I> 斜体字 如 : <U> 加底线 </U> 加底线 如 : <DEL> 横线 </DEL> 横线 如 : <TT> 打字体 </TT> 打字体 如 : 字体 <SUP> 上标字 </SUP> 字体 上标字
HTML基础:HTML表格标记及属性
常用表格标记 相关属性 : ・ ALIGN 调整 ・ BGCOLOR 背景颜色 ・ BORDER 边框 ・ HEIGHT 高度 ・ WIDTH 宽度 <CAPTION>...</CAPTION> 表格标题 。 相关属性 : ・ ALIGN 调整 <TR>...</TR> 表格列 ( </TR>可省略 ) 。 相关属性 : ・ ALIGN 调整 <TH>...</TH> 表格栏标题 ( 表头 ) 粗体字 ( </TH>可省略 ) 。 相关属性 : ・ ALIGN 调整 ・ COLSPAN 栏宽 ・ ROWSPAN 栏高 <TD>...</TD> 表格栏资料 ( 储存格 ) ( </TD>可省略 ) 。 相关属性 : ・ ALIGN 调整 ・ BGCOLOR 背景颜色 ・ HEIGHT 高度 ・ WIDTH 宽度 ・ COLSPAN 栏宽 ・ ROWSPAN 栏高 举例 <TABLE BORDER=1 ALIGN=CENTER BGCOLOR=#CCCCFF> <CAPTION>表格标题</CAPTION> <TR><TD><TH COLSPAN=2>行标题 1 <TH COLSPAN=2>行标题 2 <TR><TH ROWSPAN=2>列标题 1 <TD>A <TD>A <TD>A <TD>A <TR><TD>B <TD>B <TD>B <TD>B <TR><TH ROWSPAN=2>列标题 2 <TD>C <TD>C <TD>C <TD>C <TR><TD>D <TD>D <TD>D <TD>D </TABLE> 看了以上的例子,应该了解表格的基本写法吧!