使用PSD设计网页页面
一、一个独立的页面
1、分析这个页面,在脑海或草稿上要确立页面板块布局(如版块区域的,位置和大小)
2、根据设计稿的的情况,分析背景图的分布、ICO图的分布等
3、切割相应的图片,导出、合并图片(一般用ps 切割设计师提供的PSD图)
4、在编辑器中写整体结构XHTML代码,包括页面中出现的所有元素的结构
5、编写CSS样式中的整体以及模块代码
6、细节调整
7、浏览器验证网页兼容性,是否正确显示
二、由多个页面组成的小站点或者大站点
1、浏览所有设计稿,统一规划站点模块、图片、文件分布
2、开始第一点的操作,但规划站点的内容分布很重要
整体考虑点:
图片的合并,减少请求量
结构的合理性,语义化
样式的简洁,便于后期维护
多为后期的维护以及程序开发着想,如何简单实现效果
使用PSD设计网页页面的更多相关文章
- UI设计教程分享:电商网页页面设计常见表现手法
1.手绘插画 场景.人物以及加上故事的创意绘画 会给人梦幻若隐若现的感觉,留下深刻的印象,适合做活动页面以及宣传自已的品牌 2.简约 颜色少于三色,背景以明度偏低的颜色为主,在信息大爆炸的时代,我们 ...
- 年度榜单:2013年最佳免费 PSD 设计素材揭晓
<年度榜单>系列继续给大家带来2013年度发布的好东西,这篇文章要给大家分享的是本年度最佳的12套精美的 PSD 设计素材,你可以免费下载使用.这些免费素材不仅能帮助他们节省大量的时间,而 ...
- 20款风格独特的搜索框 PSD 设计素材免费下载
搜索框是网站中的最常用的组件一直,但有时候,搜索框因为设计不够新颖容易被访客忽视.通过提高一个搜索框的外观设计,最终对整体的网页设计带来好的变化.这份列表将是一个很好的资源,尤其是对设计师.希望你会喜 ...
- 前端切图实战(PSD设计稿转化为前端)
课程来源:https://www.imooc.com/learn/668 一:读设计稿 划分:头部.尾部.公共部分.大概分多少块.logo的重用.列表有哪些.各部分用什么技术实现等等. 二:建立项目目 ...
- 如何在自己设计的页面中调用metamask-1
启发: https://github.com/MetaMask/metamask-extension/issues/714 https://github.com/MetaMask/metamask-e ...
- web网页 页面布局的几种方式(转)
web网页 页面布局的几种方式 转载 2017年06月16日 12:19:40 2218 网页基本布局方式: (1)流式布局 Fluid 流布局与固定宽度布局基本不同点 就在于对网站尺寸的侧量单位不同 ...
- 设计网页录入信息与自己定义server数据接收
需求:设计一个注冊网页用于录入username和登录password.并将数据传入server并显示出来. 1.前言:网页提交的 get 和 post 两种方式. (1)对于get提交方式,以本文中样 ...
- wordPress设计网页实践
我希望能设计出世界上最美的画面! 首先进入你自己建立的网站http://localhost:8079/Frank,如上图所示.注意,编辑页面时,要可以上外网,否则wordPress的插件会下载出错! ...
- 设计Web页面(2)
1.前面我们新建了一个空白的ASP.NET网页,那么接下来这章我们就讲一下设计Web页面 2.布局页面有两种方法,一种是通过Table表格来布局页面窗体,另一种是通过CSS+DIV来布局窗体,其中作为 ...
随机推荐
- 如何知道PostgreSQL数据库下每个数据库所对应的目录
base目录,这是所有数据库目录的父目录. 在base目录下第一层,每个目录就是一个数据库所对应的文件. 那么如何知道哪个目录对应哪个数据呢? 查询如下:先看数据库列表 [pgsql@localhos ...
- classloader加载过程
/** * 转载请注明作者longdick http://longdick.iteye.com * */ java应用环境中不同的class分别由不同的ClassLoader负责加载. 一个j ...
- Spring强制使用CGLIB代理事务
Spring强制使用CGLIB代理事务 springaopjdkreferenceclasspath Spring1.2: 将事务代理工厂[TransactionProxyFactoryBean] ...
- JQuery Basic Features Quick Walkthrough
1. Basic Selectors $('p')—Accesses all the paragraph elements in the HTML file $('div')—Accesses all ...
- Educational Codeforces Round 2 B. Queries about less or equal elements 水题
B. Queries about less or equal elements Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforc ...
- C#的WebBrowser操作frame如此简单
刚学c#不久,也不太懂什么IHTMLDocument.IHTMLDocument2.IWebBrowser2等等.自己琢磨了好久,终于知道了怎么用WebBrowser操作frame和iframe. 1 ...
- printf, fprintf, sprintf, snprintf, vprintf, vfprintf, vsprintf, vsnprintf - 输出格式转换函数
参考:http://blog.sina.com.cn/s/blog_674b5aae0100prv3.html 总览 (SYNOPSIS) #include <stdio.h> int p ...
- CentOS 6.4 安装 thrift-0.9.3
前言 为了能给.NET的程序提供HBase访问接口需要在Hadoop/Spark集群上安装Thrift Thrift介绍 Thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强 ...
- 自问自答-hadoop在安全模式下究竟干了什么见不得人的事
本来想自己从网上搜集整理的,但是发现吴超写的刚刚好,不多不少,所以直接转载(图片失效了,用自己的图片) http://www.superwu.cn/2013/08/23/548/ 在hadoop集群的 ...
- 全面谈谈Aspects和JSPatch兼容问题
1. 背景 Aspects 和 JSPatch 是 iOS 开发中非常常见的两个库.Aspects 提供了方便简单的方法进行面向切片编程(AOP),JSPatch可以让你用 JavaScript 书写 ...