Tag Archive: 前端开发

让 Dreamweaver 支持 HTML5 和 CSS3 代码提示

刚装 Dreamweaver CS5 的时候,发现新建文档的时可以选择 HTML5 文档类型,就想 Adobe 挺超前啊,现在就开始支持 HTML5 了。直到最近研究 HTML5,才发现 Dreamweaver 只是把 DOCTYPE 变了一下,没有支持 HTML5 代码提示。

于是上网搜索,找到 Adobe 自家出的这么一个扩展:HTML5 Pack,以下是官方的特性列表:

  • 引入多屏预览面板,允许实时预览 3 种不同尺寸的屏幕,支持媒体查询。(窗口 > 多屏预览)
  • 为 HTML5 标签库中的新标签、属性(attributes)、属性(properties)添加代码提示。
  • 为现有 HTML 标签的新属性和值更新代码提示。
  • 为以下 CSS3 规范添加代码提示:2D/3D 变形、动画、背景和边框、基础用户界面、线布局、字幕、媒体查询、多列布局、注音、文本、过渡。
  • 更新实时预览以支持 <video> 和 <audio>。(需要安装 Quicktime。)
  • 改进实时预览对 CSS3 的渲染。
  • 在新建文档对话框中添加 HTML5 初始布局。
  • 为新标签在设计视图中提供更好的渲染。

需要补充的是:

  1. 该扩展只支持 Dreamweaver CS5 (有支持 CS3、CS4 的版本,见文末);
  2. 代码提示不只是支持规范中的 CSS3 属性,还包括各常见浏览器的私有属性,写过 CSS3 的同学都知道,这非常有用;
  3. 所谓初始布局就是新建文档里可以选择的布局,这个扩展增加了 HTML5 的布局,可以帮助我们熟悉 HTML5 的文档结构。

介绍到此,这是 HTML5 Pack for Dreamweaver CS5 的下载页面

还有一个CS3、CS4 使用的版本:HTML5 Pack for Dreamweaver CS3 and CS4。这个版本比 for CS5 版有所简化,建议要用就用最新的吧。

标签:,

Posted on 2010-06-29

谨慎使用微软雅黑

微软雅黑一出世,就以结构优美、显示清晰等优点赢得了人们的喜爱,很多网站也开始采用微软雅黑作为正文字体。

但是,在 XP 系统下,微软雅黑有可能会出现显示问题:

XP,Firefox,CRT

XP,Firefox,LCD

(更多…)

标签:, ,

Posted on 2010-06-14

常用网络图像格式的比较和选择

在前端开发中,你常常会发现某些图像以A格式储存效果较好,而另一些以B格式储存效果较好。(注:这里的“效果”,指对图像文件大小和图像质量的综合考量。)

因为压缩算法的不同,格式的效果会因内容而异。因为这种相关性,我们把图像按其内容特点分为几类,并分析各类图像用哪种格式储存的效果最好。 (更多…)

标签:,

Posted on 2010-05-31

xp vs. win7 文字渲染效果比较

使用 win7 有一段时间了,直到现在才发现 win7 的字体显示效果和 xp 是不同的。用一句话概括,比 xp 好太多了! (更多…)

标签:, ,

Posted on 2010-05-24

将字体名转换为 Unicode 编码

在 CSS 中使用中文稍不留神就会引起的编码问题,所以应当使用英文字符来设置中文字体,如:

body { font-family: SimSun; }

SimSun 是宋体的英文名。

这是理想情况,可惜理想和现实总有差距。Firefox 的早期版本和 Opera (直到目前的10版)均无法识别中文字体的英文名,所以还需要使用第二个方法:

body { font-family: \5B8B\4F53, SimSun; }

“\5B8B\4F53” 是“宋体”二字的 Unicode 码,这个规则对所有浏览器有效。

SimSun 和 \5B8B\4F53 是等价的,这里保留 SimSun 是为了起到注释作用,方便阅读代码。 (更多…)

标签:, ,

Posted on 2010-05-21