标签归档：网页设计规范

豆瓣网前端开发规范之-css开发规范

发表于 2011/04/26 由 前端开发-武方博  1,642 views

  1. CSS浏览器支持标准   WinXP Win7 OS X IE9 C C   IE8 A A   IE7 A A   IE6 A A   Chrome7 C C C Chrome6 A A A Chrome3 B B B Firefox4 C C C Firefox3.6 A A A Firefox3.5 C C   Firefox3 C C   Safari B B B Opera C C C （注：根据2010年11月10日数据整理） A级－交互和视觉完全符全设计的要求 B级－视觉上允许有所差异，不破坏页面整体效果 C级－可忽视视觉上的问题，但不防碍使用 2. 尽可能的通过继承和层叠重用已有样式 3. 根据新建样式的适用范围分为三级：全站级、产品级、页面级 3-1. 目前全站级的CSS文件仅有core.css和douban.css(向全站级CSS文件中添加规则参见4和5)。 3-2. 产品级CSS是指作用于某一垂直产品（如音乐、读书、电台等），文件放在css/下相应目录下。 页面级指仅在一个或少量几个页面中用到。如果仅在一个页面中用到的采用内联方式嵌入于页面hea......查看更多>>

发表在 前端开发, 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , | 留下评论

Web前端开发规范一例

发表于 2011/04/26 由 前端开发-武方博  1,836 views

  规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必 须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的 解析速度. 文件规范 1. html, css, js, images文件均归档至<系统开发规范>约定的目录中; 2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加 功能时查找对应页面; 3. css文件命名: 英文命名, 后缀.css. 共用bas......查看更多>>

发表在 前端开发, 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 一条评论

JPG图片优化压缩

发表于 2011/04/22 由 前端开发-武方博  1,376 views

当人们讨论图像优化时，他们只注意到一些流行软件提供的那几个仅有的参数调节工具，例如“质量”滑块，颜色数调板，抖动等。此外，少数专门的软件，如OptiPNG和JPEGtran，设法压缩一些多余的数据来优化图像。所有这些都是非常有名的工具，它们为网页开发者和设计师提供简单直接的方法来优化图像。 在本文中，我们会向您展示一种不同的方法来优化图像，这种方法是源于“图像数据在不同图片格式中的储存原理”。我们从JPEG格式开始，这里有个基础技术称“8像素栅格” (原文：eight-pixel grid )  eight-pixel grid 就如你已知的，JPEG图像由一系列8px × 8px区块组成，当您吧JPEG的图像质量调的太低的时候，这些区块尤其明显。这些东西如何帮助我们优化我们的图像呢？请观察下面的例子：   32×32 px, 图片质量:10（PS中），396 bytes 两个白色小方块都是8×8 px。虽然都是低质量，但右下角看......查看更多>>

发表在 网页设计 | 标签为 , , , , , , , , , , , , | 留下评论

PNG图片优化压缩

发表于 2011/04/21 由 前端开发-武方博  2,971 views

原文地址：www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques 作者：Sergey Chikuyonok 引言 做为一名网页设计师你或许已经对png格式非常熟悉，它提供了完整的透明度，这是一种无损的，功能强大的图像格式。能够很好代替gif图像格式。但 是绝大多数人认为它不可被压缩，带着这样的疑问我们来认真看完下面这篇文章。每一种图像格式都有自己的优缺点，如果掌握了相关知识，在进行图像优化时能够 针对图像进行相应处理，得到高品质的图像和高压缩率，这是图像优化的关键所在。png被称为开源的gif图像格式，它们之间有很多相同的地方（如：索引 色），但png在每一个方面都要强于gif。它介绍了一些非常酷的功能，例如：图像封装和压缩，但对我们网页设计师来说最重要的还是线性过滤（也称为“三 角过滤”）。 什么是线性过滤？ 这里介绍下它的原理，假如我们有一张5*5像素水平渐变的图片，如下图（每个数字代表了一种颜色） 通过上图你会......查看更多>>

发表在 网页设计 | 标签为 , , , , , , , , , , , , , , , , , , | 留下评论

网页设计规范

发表于 2011/04/21 由 前端开发-武方博  1,071 views

  一、为什么要写设计规范？设计规范是为谁服务的？ 谈这个话题之前，我们先了解一下什么是设计规范？设计规范是指对设计的具体技术要求,是设计工作的规则. 一般包括总体目标的技术描述、功能的技术描述、技术指标的技术描述,以及限制条件的技术描述等． 那我们为什么要用设计规范？第一，可以让我们清楚项目的规则，以减少犯错误的机率；第二，加强团队之间的合作，责任明确，提高工作效率．第三，锻炼我们整体全面的思维能力．  规范最终是为项目服务的．我们所做的一切都是为了优化项目，提高我们的工作效率．但是，设计规范也是一种设计团队文化．最终受益的不止是项目，还有我们自己．当我们形成这种文化，我们会配合的更默契；我们不需要在工程师加班的时候，一定留守在那里陪着；我们不需要在调别人设计的源文件时，一遍一遍的询问．当你不再因为别人的事情而加班的时候，心情是否好一些呢？ 设计规范渗透在整个软件工程里．不同的工程模型......查看更多>>

发表在 前端开发规范和经验 | 标签为 , , , , , , , , , , , , , , , , | 留下评论

图片格式与设计那点事儿

发表于 2010/12/10 由 前端开发-武方博  917 views

以下内容来自于淘宝UED 第一次写技术博客，有不尽如人意的地方，还请见谅和指正。 为什么想整理这方面的类容，我觉得就像油画家要了解他的颜料和画布、雕塑家要了解他的石材一样，作为网页设计师也应该对图片格式的特性有一定了解，这样才能更好的表达你的创意和想法。 除此之外，我们在平时工作中也会遇到许多与图片格式相关的问题。比如设计师会奇怪为什么有些页面的产出物总是没法达到设计稿那样的品质和效果，什么样的设计才更适合Web页面；页面重构师和前端工程师则想知道在切图的时候应采用什么图片格式、如何进行参数设置才能达到品质和性能的最优化。 有时候我们可能会因为一张格式不正确的图片而导致设计品质的下降以及页面性能的降低。了解图片格式的特性就是为解答这些困惑从而让我们设计的产品更好、更快。 本文主要包括以下几方面内容： 1、基本概念 矢量图与位图 有损压缩与无损压缩 2、实际应用 什么时候应该使用PNG 什么时候应该使用......查看更多>>

发表在 网页设计 | 标签为 , , , , , , , , , , , , , , , , , , , , , , | 2 条评论