<![CDATA[木子屋 - 网页设计]]> http://www.mzwu.com/ zh-cn PBlog2 v2.4 木子屋 http://www.mzwu.com/images/logos.gif http://www.mzwu.com/ 木子屋 http://www.mzwu.com/article.asp?id=4567 <![CDATA[纪念Fireworks最后一个版本Fireworks CS6！]]> service@mzwu.com(dnawo) Fri,13 Mar 2020 12:13:05 +0800 http://www.mzwu.com/default.asp?id=4567
引用内容 引用内容
2013年，在终结Creative Suite（CS）家族的同时，Adobe宣布迎来Creative Cloud（CC）全新系列应用和服务。MAX大会上，Adobe证实，Web设计、原型设计和移动应用程序设计工具Fireworks被毙掉了。

Adobe表示，他们已经决定，Fireworks不会包含在CC家族中，开发团队将专注于开发全新的工具来满足消费者的需求。







PS：Fireworks CS6的LOGO换了色调，真心看不习惯 ]]> http://www.mzwu.com/article.asp?id=4464 <![CDATA[Font Awesome图标字体库使用示例]]> service@mzwu.com(dnawo) Mon,18 Nov 2019 14:22:13 +0800 http://www.mzwu.com/default.asp?id=4464


Font Awesome图标字体库使用示例

复制内容到剪贴板程序代码 程序代码
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Font Awesome演示</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--引入Font Awesome-->
        <link href="css/font-awesome.min.css?v=4.7.0" rel="stylesheet">
    </head>

    <body>
        <!-- 基本图标(fa+图标名称) -->
        <i class="fa fa-camera-retro"></i>

        <!-- 大图标(fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x) -->
        <i class="fa fa-camera-retro fa-3x"></i>

        <!-- 旋转与翻转(fa-rotate-*、 fa-flip-*) -->
        <i class="fa fa-arrow-up fa-rotate-90"></i>
        <i class="fa fa-arrow-up fa-rotate-270"></i>
        <i class="fa fa-arrow-up fa-flip-horizontal"></i>
        <i class="fa fa-arrow-up fa-flip-vertical"></i>

        <!-- 动画(fa-spin、fa-pulse) -->
        <i class="fa fa-refresh fa-spin"></i>
        <i class="fa fa-spinner fa-pulse"></i>

        <!-- 组合使用(fa-stack作为父容器、fa-inverse切换颜色) -->
        <span class="fa-stack fa-lg">
          <i class="fa fa-square fa-stack-2x"></i>
          <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
        </span>
    </body>
</html>



相关链接

[1].Font Awesome中文网：http://www.fontawesome.com.cn/
[2].Font Awesome图标库：http://www.fontawesome.com.cn/faicons/
[3].Font Awesome案例：http://www.fontawesome.com.cn/examples/]]> http://www.mzwu.com/article.asp?id=4463 <![CDATA[以双斜杠//开头的URL的含义]]> service@mzwu.com(dnawo) Mon,18 Nov 2019 13:02:35 +0800 http://www.mzwu.com/default.asp?id=4463
复制内容到剪贴板程序代码 程序代码
<img src="//mzwu.com/img/logo.png">

img 中的url是以双斜杠“//”开头的，这种写法有特殊的用途，它会判断当前的页面协议是http 还是 https 来决定请求 url
的协议。防止IE下出现“This page contains both secure and nonsecure items”的报错。



如果你浏览的是本地文件，它又会解析为 file:// 协议。

这种特性可以用来加载CDN：

复制内容到剪贴板程序代码 程序代码
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

也适用于CSS：

复制内容到剪贴板程序代码 程序代码
.omgomg { background: url(//mzwu.com/lvtao.gif); }

注意：如果在IE7，IE8中使用 <link> 和 @import 引入 CSS 的时候，会下载两次 CSS 文件。

参考资料

[1].the-protocol-relative-url：http://www.paulirish.com/2010/the-protocol-relative-url/]]> http://www.mzwu.com/article.asp?id=4357 <![CDATA[1厘米等于多少像素？图片像素和打印尺寸(英寸/厘米)换算公式]]> service@mzwu.com(dnawo) Tue,12 Sep 2017 12:15:41 +0800 http://www.mzwu.com/default.asp?id=4357

一张图片打印出来的实际尺寸是由图片的像素和分辨率共同决定的。像素是指构成图片的小色点，分辨率是指每英寸上的像素数量，可以看做是这些小色点的分布密度，因此，像素相同时，分辨率越高则像素密度越大，实际打印尺寸越小，图像也越清晰。

图片像素和打印尺寸(英寸/厘米)换算公式

引用内容 引用内容
打印尺寸(英寸)=像素/分辨率

引用内容 引用内容
打印尺寸(厘米)=2.54*像素/分辨率

Tips: 通常手机、电脑上用的照片分辨率都是72，如果照片要打印或印刷出来，分辨率要调成300+。

综上，分辨率为72时，1厘米等于28像素，分辨率为300时，1厘米等于118像素。]]> http://www.mzwu.com/article.asp?id=4314 <![CDATA[Photoshop CS6保存选区和载入选区示例]]> service@mzwu.com(dnawo) Thu,01 Dec 2016 21:25:18 +0800 http://www.mzwu.com/default.asp?id=4314 1、Photoshop CS6保存选区







2、Photoshop CS6载入选区





]]> http://www.mzwu.com/article.asp?id=3460 <![CDATA[淘宝网买家/卖家信用等级图标素材]]> service@mzwu.com(dnawo) Mon,25 Feb 2013 22:35:19 +0800 http://www.mzwu.com/default.asp?id=3460 买家信用等级图标(大图)






















买家信用等级图标(小图)






















卖家信用等级图标






















我下载整理好了一份，点击这里直接下载。]]> http://www.mzwu.com/article.asp?id=3384 <![CDATA[Photoshop通道抠图示例]]> service@mzwu.com(dnawo) Sat,24 Nov 2012 15:16:02 +0800 http://www.mzwu.com/default.asp?id=3384

第一步：选择合适通道建立副本

选择反差效果比较明显的通道建立副本，这边我们选择绿色通道：



第二步：调整通道色阶

按Ctrl+L打开色阶，调整输入色阶中的黑色和白色三角形到适合位置，直至人物和背景黑白分明：





PS：上一步选择的通道会影响到这边能不能调整到理想效果。

第三步：涂黑人物

①.用套索工具将人物区域大部分选中，填充黑色：





②.用画笔工具将剩余部分白色区域涂黑：



第四步：反相

按Ctrl+I对通道进行反相：



第五步：将通道转为选区

按住Ctrl键，鼠标单击绿副本通道，将通道转为选区：



第六步：通过拷贝建立图层

将RGB通道设置为可见：



回到图层面板，按Ctrl+J通过拷贝建立图层：



OK，Photoshop通道抠图完成！]]> http://www.mzwu.com/article.asp?id=3280 <![CDATA[PowerDesigner建模画折线示例]]> service@mzwu.com(dnawo) Mon,06 Aug 2012 10:44:53 +0800 http://www.mzwu.com/default.asp?id=3280

2.按住Ctrl，用鼠标在线中间增加两个节点：


3.松开Ctrl，用鼠标将线向右拉：


4.稍做调整，最终效果：
]]> http://www.mzwu.com/article.asp?id=3135 <![CDATA[Fireworks中Index Transparency和Alpha Transparency的区别]]> service@mzwu.com(dnawo) Tue,28 Feb 2012 10:48:43 +0800 http://www.mzwu.com/default.asp?id=3135
第一步：打开Fireworks，新建一个长宽都为300px，颜色为白色的画布；
第二步：画一个矩形，边框为黑色、边框宽50px，长宽都为200px，矩形左上角坐标为(50,50)；
第三步：画一个白色正方形，长宽都为100px，移到矩形中央；



按Ctrl+Shift+X打开导出预览界面，选择Index Transparency，预览效果如下：



然后选择No Transparency恢复原样，再选择Alpha Transparency[1]，预览效果如下：



好了，实验做完了，现在我们来做下总结。

Fireworks中Index Transparency和Alpha Transparency的区别：

Index Transparency：图片上所有和画布颜色一样的地方都变成透明；
Alpha Transparency：仅删除画面背景；

补充说明

[1].若是选择Index Transparency后直接选择Alpha Transparency，看不到Alpha Transparency的效果，必需选择No Transparency恢复原样后再选择Alpha Transparency。
[2].有兴趣的同学可以把画布颜色设置为黑色，其他不变，再预览下效果 ]]> http://www.mzwu.com/article.asp?id=3111 <![CDATA[Dreamweaver CS3中Spry使用示例]]> service@mzwu.com(dnawo) Fri,10 Feb 2012 10:22:43 +0800 http://www.mzwu.com/default.asp?id=3111
百度百科Spry定义

引用内容 引用内容
Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。有了 Spry，就可以使用 HTML、CSS 和极少量的 JavaScript 将 XML 数据合并到 HTML 文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。在设计上，Spry 框架的标记非常简单且便于那些具有 HTML、CSS 和 JavaScript 基础知识的用户使用。Spry 框架主要面向专业 Web 设计人员或高级非专业 Web 设计人员。它不应当用作企业级 Web 开发的完整 Web 应用框架（尽管它可以与其它企业级页面一起使用）。Spry可以使用XML和JSON两种格式的数据源

Spry验证文本域使用示例









参考资料

[1].spry_百度百科：http://baike.baidu.com/view/1081073.htm
[2].Performing full-featured form validations：http://www.adobe.com/cn/devnet/dreamweaver/articles/spry_form_validations.html]]>