‘页面实现’ 分类的存档

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

没有评论Data URI 和 MHTML

2009年12月18日

Data URI

Data URI是由RFC 2397定义的一种把小文件直接嵌入文档的方案。通过如下语法就可以把小文件变成指定编码直接嵌入到页面中：

data:[<MIME-type>][;base64],<data>
  1. MIME-type：指定嵌入数据的MIME。其形式是[type]/[subtype]; parameter，比如png图片对应的MIME是image/png。parameter可以用來指定附加的信息，更多情況下是用于指定text/plain和text/htm等的文字编码方式的charset参数。默认是text/plain;charset=US-ASCII。
  2. base64：声明后面的数据的编码是base64的，否则数据必须要用百分号编码（即对内容进行urlencode）。

阅读全文…

分类: 前端开发, 页面实现 标签: , ,

没有评论默认Web字体样式

2009年12月17日

通常用户看到的页面的样式会受到三层控制，第一层是浏览器的默认样式，第二层是网页定义样式，第三层是用户自定义样式。和CSS一样，后面的优先级高于前面的，也就是说网页定义样式可以覆盖浏览器的默认样式，而用户自定义样式优先级最高。实际情况是虽然浏览器都或多或少提供了用户自定义样式的功能，但是极少数会有用户去自定义，一般用也是高级用户。而浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。

拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。
阅读全文…

分类: 前端开发, 视觉设计, 页面实现 标签: ,

5 条评论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部分，即辛苦又没成就感……

阅读全文…

分类: JavaScript脚本, 前端开发, 页面实现 标签: ,

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

阅读全文…

分类: 前端开发, 页面实现 标签: , ,