psd转html 织梦,如何将PSD模型转化成XHTML和CSS文件

继上一篇教程，如何用Photoshop设计一个具有现代感的博客界面，现在我们来看看如何将这个概念设计转化为完整的由XHTML和CSS组成的标准网页。从PS里面将之前的设计稿从PS里面输出然后再加上编码，这样我们就会得到一个完整的博客设计。

在上一个教程里面，我们创建了一个包含了所有框架，设计，色彩，拟议定的板式和基本内容的设计模型。现在是时候让我们回顾一下之前的计划和概念设定来看看——哪些需要使用纯粹的xhtml和css，哪些需要使用到原来的图片。

首先被导出的元素是大的背景图。隐藏掉其他所有页面的图层，然后选择大的背景图导出为web使用格式。

从第一印象上来讲，这个大图片很容易让人觉得他很大，所以体积会变的很大。但是事实上用jpg格式调整好质量质量之后这个文件仅仅才30K而已，这里需要你来拿捏文件的质量和整体的体积的平衡。(译者注：图片如果太大可以适当用高斯模糊来减少细节这样图片体积就会缩小点，一般来讲背景图不必使用特别清晰的底图，增加体积却又吸引眼球影响阅读。)

接下来导出的是主体内容区，画出另一个大的选区，其重要包括整个中部面板——当然别忘记那些带有效果的地方比如阴影，半透明的边框等，都要一一包含在内。注意还要考虑到头部复杂的透明度的导航区域，所以选取应该直接延伸到顶部。

一般来讲允许网页垂直重复的话，只要选择中部区域一小列内容导出就可以，我们后面可以让他垂直重复来达到设计稿上面的效果而不增加文件体积。

下面来完成页脚部分，选择同样的宽度，然后高度要包含灰色渐变的图形。

为了导出侧边栏，主体区域现在暂时的使用垂直拉伸。

psd转html 织梦,如何将PSD模型转化成XHTML和CSS文件相关推荐

织梦 PHP 字段调用,织梦dede网站内容模型普通文章调用自定义图片字段的方法(和调用...
织梦DedeCMS网站内容模型普通文章调用自定义图片字段的方法: 我们首先需要创建一个自定义函数, 找到:/include/extend.func.php ,在 function GetOneImgU ...
dede织梦建立独立内容模型
dedecms是很灵活的,在织梦系统中有内容模型这个概念,不同内容模型可以用来构建不同内容形式的站点,在系统中自带了以下几种模型:普通文章.图集.软件.商品.分类信息.专题.通过系统自带的模型,我们 ...
织梦php程序调用模型,织梦教程：Dedecms的频道模型新建字段调用方法
织梦内容页图片过大,我们又不希望它不按比例的缩小,因为如果缩小不按比例,图片就会变形,所以我们需要找到一种等比例缩放图片的方法. 第一步:打开include/arc.archives.class.ph ...
织梦教程：自定义模型会员无法投稿的解决方法
具体方法: 1.复制普通文章模型,增加了一个字段,允许投稿,级别为注册会员,组别不限制. 2.新建一个栏目,内容模型为此模型,且允许投稿. 3.在系统设置->基本参数->会员设置中 &q ...
让织梦CMS的后台编辑器支持优酷视频
最近做了一些视频教程传到优酷网站上,但我想引入这些视频教程到我的网站,在发表时我发现织梦CMS自带的编辑器又不直接支持优酷等视频网站的引用.所以为了方便教程的发布,特意在网站搜索到本篇教程,详细讲解如 ...
织梦同步静态文件到服务器,静态网站添加到织梦
静态网站添加到织梦内容精选换一换本文介绍了弹性文件服务SFS各特性版本的功能发布和对应的文档动态,新特性将在各个区域(Region)陆续发布,欢迎体验. 开启网页防篡改时,您需为指定的主机分配一 ...
织梦DEDE网站后台如何上传附件
首先登录织梦网站后台: 分别点击核心 - 附件管理 - 文件式管理里面有织梦自带的几个文件夹,包括图片,视频,软件等文件夹.我们来新建一个file文件夹点击新建目录建立file文件夹. ...
php对话框制作,织梦系统“提示窗口对话框类”详解，oxwindow.class.php、catalog_do.php...
如果对织梦系统做过二次开发或学深入研究过的话,一定会知道在我们做织梦二次开发时,一般会把php文件以及对应的模板文件起的名字,除了扩展名外,其它都一样,这是织梦文件起名的一个特点.例如,index_b ...
织梦cms响应式影视传媒模板
介绍: 织梦cms响应式传媒模板,全站div+css布局,全屏自适应设计,兼容主流浏览器,如谷歌.火狐.ie.opera等. 缩略图懒载效果,加快网页打开速度.图集内容有alt信息则显示,没有则自动隐 ...
织梦响应式鲜花绿植花艺类网站模板(自适应手机端)
简介: 名称:织梦响应式鲜花绿植花艺类模板(自适应手机端) 该模板网站很容易吸引访客点击,提升ip流量和pv是非常有利的. 本套模板采用现在非常流行的全屏自适应布局设计,且栏目列表以简洁,非常时尚大气 ...

psd转html 织梦,如何将PSD模型转化成XHTML和CSS文件

psd转html 织梦,如何将PSD模型转化成XHTML和CSS文件相关推荐

最新文章

热门文章