自己整理

其实标准的网制作完成的工作实际是:psdtohtml,一般情况下,我们会拿到美工的psd,这时候不同的人会有不同的做法:1.打开fireworks将图片切割导出为html。2.直接在dreamweaver之类的工具去拖拉布局,导入相关的图片,flash资源。3.先在ps中完成切图后,在文本编辑器中看着效果图一步步的制作。以上是大多被采用的方法,但都不好:第一种方法最为不好,这样的代码根本不具维护性和可读性。第二种方法也不好,代码难免会有冗余,做出来的东西基本需要排查一遍。第三种方法也不好,因为你需要看效果图一点点的拼,也就是说写html标签的时候,你在不断的假设这块要怎么去显示。正确的做法是:1.拿到psd后,先不要做别的,直接在文本编辑器中将网页的框架写出来,不要假设这块将来css要去怎么渲染,完全自然化的标签,不加任何的css。2.写完之后在各个浏览器运行之后确保大体定位都没有问题。3.书写总体css,这里的css只负责大块的定位及样式。4.切出需要的图片资源,在写好的框架中一点点的去构造,不断的调试,最终为成品。5.最后,为自己的代码添加注释,在css,html中都要合适的为自己的代码添加注释。要想做出能灵活切换皮肤,让css主导表现,还有很多要注意的地方,但大体的流程就是这样的,当然我们一开始不能直接就做到先写html,但起码要有这个意识,循序渐进。。。当然还有一些自动生成的工具,比如:Divbrush关联切片(guanlian8)等

2015-10-8 1700 0
源码

作为一个网站设计/开发人员,你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的工具大都在互联网上能搜索到,按功能分类的DIVCSS工具可以有效地节省你设计网站的时间。生成器1、CssCreator-对初学者来说,CssCreator是一个可以创建自适应宽度或者是固定宽度的浮动布局生成器,可以生成带有Header和Footer的三栏布局。2、Divbrush-如果是菜鸟,Divbrush对于你必定是一款高效的通过切图使图片转HTML/div+css布局源码的自动软件。3、Web2.0Generator-Web2.0Generator可以利用HTML和CSS生成一个完整的网站布局。它对于大多数来说有学习的价值。4、CSSMate-CSSMate是一个在线CSS编辑器,简单得不能再简单了。5、QrONECSSDesigner-QrONE是一个CSS在线生成与编辑器。表格类1、CSSFormCodeMaker-很方便地生成“五颜六色的BOX布局”的表格。2、JotForm-JotForm是一个“所见即所得”的表格生成器。字体类1、EmCalculator-EMCalculator可以帮助你计算px与em之间的转换。2、CSSFontandTextStyleWizard-这个小工具可以很方便地将你的CSS样式呈现出来。导航/按钮类1、CSSButtons-CSS按钮和文本在线生成工具。2、CSSMenuGenerator-CSSMenuGenerator可以同时生成基于CSS和HTML代码的漂亮的按钮。优化/格式化类1、CSSTidy-CSSTidy是一个开源的CSS分析和优化工具;2、CleanCSS-CleanCSS是一个基于CSSTidy的强大的CSS优化和格式化工具。Chada曾经介绍过这个在线工具,在这里。3、CSSOptimizer-CSSOptimizer可以通过优化压缩CSS样式文件大小。4、CSSAnalyzer-CSSAnalyzer可以帮助你检查你的CSS样式是否符合W3C的认证。来源:http://www.chinaz.com/web/2009/0401/71309.shtml

源码

手机访问pc站跳转到手机站:方法一:使用百度siteapp中的js进行判断<scriptsrc="http://siteapp.baidu.com/static/webappservice/uaredirect.js"type="text/javascript"></script><scripttype="text/javascript">uaredirect("需要跳转的手机网址")</script>方法二:<scriptlanguage="JavaScript">functionmobile_device_detect(url){varthisOS=navigator.platform;varos=newArray("iPhone","iPod","iPad","android","Nokia","SymbianOS","Symbian","WindowsPhone","Phone","Linuxarmv71","MAUI","UNTRUSTED/1.0","WindowsCE","BlackBerry","IEMobile");for(vari=0;i<os.length;i++){if(thisOS.match(os[i])){window.location=url;}}//因为相当部分的手机系统不知道信息,这里是做临时性特殊辨认if(navigator.platform.indexOf('iPad')!=-1){window.location=url;}//做这一部分是因为Android手机的内核也是Linux//但是navigator.platform显示信息不尽相同情况繁多,因此从浏览器下手,即用navigator.appVersion信息做判断varcheck=navigator.appVersion;if(check.match(/linux/i)){//X11是UC浏览器的平台,如果有其他特殊浏览器也可以附加上条件if(check.match(/mobile/i)||check.match(/X11/i)){window.location=url;}}//类in_array函数Array.prototype.in_array=function(e){for(i=0;i<this.length;i++){if(this[i]==e)returntrue;}returnfalse;}}mobile_device_detect("需要跳转的手机网址");</script>pc访问手机站跳转到pc站varfrom='';varfrom_pc=0;if(from!='pc'&&from_pc!=1){varuserAgentInfo=navigator.userAgent;if(userAgentInfo.indexOf("Android")>0||userAgentInfo.indexOf("iPhone")>0||userAgentInfo.indexOf("SymbianOS")>0||userAgentInfo.indexOf("WindowsPhone")>0||userAgentInfo.indexOf("iPod")>0||userAgentInfo.indexOf("iPad")>0){}else{window.location.href="需要跳转的PC网址";}}if(from_pc==1){varhref=window.location.href;if(href.split('?').length>1){window.location.href=href+"&from=pc";}else{window.location.href=href+"?from=pc";}}document.addEventListener('WeixinJSBridgeReady',functiononBridgeReady(){WeixinJSBridge.call('hideToolbar');});