标签 PSD 下的文章霓虹建站 > 后花园

如何将PSD模型转化成XHTML和CSS文件

继上一篇教程,如何用Photoshop设计一个具有现代感的博客界面,现在我们来看看如何将这个概念设计转化为完整的由XHTML和CSS组成的标准网页。从PS里面将之前的设计稿从PS里面输出然后再加上编码,这样我们就会得到一个完整的博客设计。在上一个教程里面,我们创建了一个包含了所有框架,设计,色彩,拟议定的板式和基本内容的设计模型。 现在是时候让我们回顾一下之前的计划和概念设定来看看——哪些需要使用纯粹的xhtml和css,哪些需要使用到原来的图片。首先被导出的元素是大的背景图。隐藏掉其他所有页面的图层,然后选择大的背景图导出为……

CSS3实现简洁风格按钮方法

dribbble.com是一个全球优秀设计师聚集的地方,我经常去上面看看大师们的优秀作品。今天我又看到一个很好看的按钮。设计师用一个图层实现了按钮,这个按钮有5个效果:0. 本身是一个纯色填充图层。1. 描边效果。2. 高光效果(即PSD中的“内阴影”效果)。为什么能用内阴影做高光呢?因为设计者用了纯白的阴影(不透明度65%)。3. 投影效果(即PSD中的“投影”效果)。向下的一像素的阴影,随不起眼,但如果想显出立体感,却至关重要。4. 本影效果(即PSD中的“斜面和浮雕”效果)。这一效果给按钮下方添……

WEB标准,Web前端开发工程师必备技术列表

  想要打造并拥有一流的Web产品开发团队,在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说,仅仅把握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备,特此罗列了Web前端产品工程师所涉及的技能列表如下:  通过许多实际项目,个人认为一个完备的前端产品开发团队,必须拥有如下的人才配备,也希望大家补充:  ◎ 团队全体成员达到所有技能中的a级标准  ◎ 团队全体成员必须把握两项技能中的b级标准,并保证所有的b级标准在该团队中有50%以上成员能达到  ◎ 团队全体成员必须把握一项技能中的c级标准,并保证……

写给刚刚接触web标准的新人们

  div还是table?这是个问题……  自从web标准和网站重构的热潮席卷而来,到处都可以看到如下的问题:  问题1:怎么做1px高的div?  问题2:这个x行y列的table用div怎么实现?  问题3:css能不能实现拖动这个行?  问题4:为什么网页在浏览器里是正常的,可是在dw里却乱了?  问题5:为什么布局在ie里面是正确的,可是在ff里就乱了?  ……  对于刚刚发觉表格布局已经被大家所抛弃,从而开始接触web标准来构建网页的人来说,这确实是个问题。  其实,这个问题从一开始就……

文件上传后缀名与文件类型对照表

  网上有很多php文件上传的类,文件上传处理是php的一个特色(至少手册上是将此作为php特点来展示的,个人认为php在数组方面的优异功能更有特色),学php的人都知道文件上传怎么做,但很多人在编程中却可能忽视了一些细节问题,那就是文件的类型(MIME)。在表单将文件提交给php做处理之前,浏览器会先解析识别一边是什么类型的文件,之后进入php处理环节,php又会去识别解析此文件的原始类型(并不是说你改成什么后缀就是什么文件)。在这个过程中会有一些浏览器兼容,更准确来说是文件类型解析标识不一致的问题。这样在php处理Post过来的文件类型时就需要根……

PHP经验集锦

最近刚刚完成手中的项目,比较闲。来这儿转转,把积累的一些技巧分享给大家!1、关于PHP重定向方法一:header("Location: index.php");方法二:echo "<script>window.location =\"$PHP_SELF\";</script>";方法三:echo "<META HTTP-EQUIV=\"Refresh\" CONTENT=\"0; URL=index.php\">";2、获取访问者浏览器function browse_infor() {$browser="";$br……

asp.net工具类- PSD2swfHelper

  using System.Web;using System.Text;    public static class PSD2swfHelper{    /// <summary>    /// 转换所有的页,图片质量80%    /// </summary>    /// <param name="pdfPath">PDF……

最全的 Twitter Bootstrap 开发资源清单

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,由Twitter的设计师Mark Otto和Jacob Thornton合作开发。Bootstrap提供了优雅的HTML和CSS规范,它由动态CSS语言LESS写成,与CSS框架Blueprint存在很多相似之处。Bootstrap推出后颇受欢迎,一直是GitHub上的热门开源项目。Bootstraphero网站搜集了大量关于Bootstrap的开发资源,本文列举如下(关于这些资源的介绍请参阅原文或资源链接)。一、组件(用来扩展Bootstrap的基本功能)显示组件  ……

CSS+JS制作逼真的文字倒影效果

<!DOCTYPE HTML PUBLIC#"-//W3C/DTD HTML 4.0//EN" "http://www.w3c.org/tr/html4/strict.dtd"> <head><title></title> <style> body{font-size:12px;font-family:宋体} #aa{position:relative;width:128px;height:168px} </style> function……

简单描述Adobe Dreamweaver CS3 的最新功能

Ajax 的 Spry 框架通过 Adobe® Dreamweaver® CS3,可以使用 Ajax 的 Spry 框架进行动态用户界面的可视化设计、开发和部署。Ajax 的 Spry 框架是一个面向 Web 设计人员的 JavaScript 库,用于构建向用户提供更丰富体验的网页。Spry 与其它 Ajax 框架不同,可以同时为设计人员和开发人员所用,因为实际上它的 99% 都是 HTML。请参阅以可视方式构建 Spry 页。Spry 构件Spry 构件是预置的常用用户界面组件,可以使用 CSS 自定义这些组件,然后将其添加到网页中……
嘿,我来帮您!