‘页面实现’ 分类的存档

结构与表现分离[div+css]带着我们了解了W3C标准,也成为了前段工程师必须掌握的技能,前端重构!让我们用更语义化的代码谱写我们的页面!

6 条评论Firefox非主流开发扩展推荐

2009年12月15日

Firebug已经家喻户晓,不必多说。下面推荐的是些村酒野蔬,虽没什么名气,但其味醇厚甜美,食之飘香再难忘情。

HTML Validator

html_validator
http://users.skynet.be/mgueury/mozilla/

很喜欢这个扩展的Tidy算法模式,可以检查出HTML页面中绝大部分嵌套和书写错误,并且针对每个错误都有详细的说明和推荐写法。当然,很多时候,我们不大可能去纠正所有错误和警告。一个常用的小技巧是:将可以容忍的错误添加到Hidden列表中。这样,只要看看右下角的状态信息,就知道页面中是否还有错误了。
阅读全文…

没有评论Firebug非主流小技巧分享

2009年12月15日

快速查看背景图

大部分情况下,Firefox自带的右键就搞定了:
view_bg

但有时,只能通过CSS找到背景图片地址:
view_bg2

通常做法是:
view_bg3
要准确无误的选中URL部分,即辛苦又没成就感……

阅读全文…

2 条评论在网页中嵌入任意字体的解决方案

2009年12月10日

字体使用是网页设计中不可或缺的一部分。经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片,这样做有几个明显缺陷:1. 不可能大范围的使用该字体;2. 图片内容相对使用文字不易修改;3. 不利于网站SEO(主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素)。网络上有一些使用sIFR技术、或javascript/flash hack的方法,但实现起来或繁琐,或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。
查看Demo 下载案例

【第一步】

获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体。

.TTF或.OTF,适用于Firefox 3.5、Safari、Opera
.EOT,适用于Internet Explorer 4.0+
.SVG,适用于Chrome、IPhone

阅读全文…

1 条评论垂直栅格与渐进式行距(下)

2009年12月7日

新问题

来也匆匆,去也“冲冲”。距上次发布垂直栅格与渐进式行距(上)发布,已经不知不觉过去了两个多月了。反过来,看看上次的成果。诶?怎么感觉边注有点奇怪呢? 阅读全文…

没有评论垂直栅格与渐进式行距(上)

2009年12月7日

准备工作

去年的时候,青云发表过关于栅格系统的文章 . 我们知道网页的栅格系统是运用固定的格子设计版面布局,使其风格工整简洁. 视觉上来说,栅格系统能够将大块区域分割成小区域,清楚地展示页面的布局,并能够引导视觉线在各个板块之间扫描、阅读. 从信息上来说,栅格系统让信息的呈现方式更加直观,从而有效提高易读性.
但是大部分栅格系统是在水平方向上的布局,其实,我们的垂直方向也是有栅格系统的——也就是我们的“垂直韵律”.

垂直韵律的就像好比我们手上拿着的线格本子,有着一行行的网格线,安排着垂直方向上的文字排版。“排版中的空间就像是音乐里的节拍. ”音乐的节拍虽然有许多变化,但是几乎每首歌都会有一个固定的节拍来掌握整个歌曲的节奏. 这就是为什么栅格系统一般用固定宽度的网格阵列来指导和规范网页中的版面布局以及信息分布.
其实,那么,在网页里,垂直韵律应由三个因素控制: 

认真考量这三个因素的值,才能实现垂直韵律.