准备活动

都说我解说技术比较银荡，那就更银荡一些 ^_^ 要大干一场，那是需要一系列性情道具的····
M8的系统是 基于wince 封装出来的，这个大家应该都知道。所以咱们需要的东西 如下：

• 1. Visual Studio 2008 下载地址 点进去 捡专业版 下载
• 2. M8SDK 下载地址 是魅族的开发社区的下载地址
• 3. M8SDK中文版文档 同楼上
• 4. M8 一只 （选填） 如果你真的想开发M8应用，去整一个，因为同步调试比模拟器调试要真实多了。
• 5. 同步驱动 下载地址 官网有的下
• 6. 电脑一只 不要告诉我你想在M8上开发 =，= 我用的win7 64位，很销魂
• 7. .NET Framework 3.5 下载地址 win7 就不用装了。

前戏

前戏一定要有不然怎么OOXX，是安装软件，且顺序如下：
.NET Framework 3.5 (win7)可以忽略
Visual Studio 2008 选择自定义安装，除了C++意外的都不要勾选(除非你还要开发其他东西)，我就是这么干的，当然MSDN也不要装了，有问题google 吧，然后是耐心等待，看看X片吧。

然后装 M8SDK(SDK要在vs之后装，不然是装不上的)，这里要注意一下，论坛里有老多人卡在这里，多少也要先看看SDK文档再下手么，文档里写得还是蛮清楚的，虽然有些地方要误导人。如下图，装的时候，不要勾选 文档部分。

接着是装驱动，叉p 跟win7 要装的东东不一样，去文档里看吧。这里就不说了。确保同步成功就ok。

前戏结束， 应该湿了~~~~~ 哼哼~~~

剥橘子，带TT

论坛里好多初学者碰到了N多关于怎样开始这个hello M8 的项目。这个灰常蛋疼，虽然SDK文档里 有步骤但是却很蛋疼的漏掉点什么，总是调试不成功，同步不成功。就像 正要OOXX 的时候同事来电话一样，立马倒塌~~~~

那么开始我们的hello M8 的项目，
1. 新建项目，智能设备 – win32智能设备项目 见文档 – 创建基本MZFC程序
按照文档里说的 复制 hello M8的程序到cpp里。

2. 项目建好后， 选择 项目 – XX属性 配置(重要) ，这里文档虽然有步骤，但是似乎漏了点，
首先是 添加依赖项 选择[链接器]-[输入]-[附加依赖项] 写入： mzfcs.lib platformApi.lib (文档里有说明) 如下图：

3. 接下来是设置预处理器，[项目]-[属性]-[C/C++]-[预处理器]-[预处理定义]，添加 MZFC_STATIC，这里文档的图片容易误导人，因为文档中图片中只有一个MZFC_STATIC，很多人以为是吧其他都删掉，其实不是，是在前面追加一个。不然后面编译的时候会出现如下图的错误。

4. 然后是设置 不使用预编译头，这一步文档里没说，但是论坛里好多帖子都在问这个问题，不下十个，觉得官方有必要改改文档了，
[项目]-[属性]-[C/C++]-[预编译头] 设置成 不使用预编译头，顺便贴一个没设置这一项编译不成功的截图。

5. 使用模拟器调试，如下图 M8SDK Emulator 代表模拟器 模式(默认就是这个)。 选择[生成] – [编译] Ctrl+F7，看到下方成功了之后，再按(F5)[调试] 应该就跳出个 恶心的模拟器，为什么恶心呢？因为一开始是黑屏的以为模拟失败，等了10秒，丫才开机·· 囧rz 还要开机啊······，并且效果不好，感觉怪怪的速度也不很慢。有大虾知道如何优化，请留言告诉我下，我补上。

6. 同步调试。这一步留给有小八的童鞋们。连上小8后，(确保同步驱动装好，同步模式可以跑)，然后将 M8SDK Emulator 下拉 选为 M8SDK ARMV4I Device，然后点击右侧的小手机按钮进行手机同步测试。看看是否同步，

7. 配置远程目录，这个文档里也有说明，选择 [项目]-[属性]-[部署] 设置远程目录，建议： 将目录设置成Disk目录下的某文件夹，如\Disk\MM ， 文档里的说明是Windows 生成之后找都找不到，

同样，设置远程调试文件 [项目]-[属性]-[调试] ，远程文件，如下：

8. 编译生成文件 这个是关键的一步，因为之前刚开始整的时候一直连接不到手机，都是直接弹出个调试器，或者提示找不到远程文件。

9. 屡试不爽，久久不放，然后按下F5 应该就能在你的小八上看到运行的软件了。

好吧，开始你的M8之旅吧。

有问题可以留言欢迎讨论。

您可能还对这些日志感兴趣

• 不走寻常路–Win7下vs2008搭建M8开发平台
• 整得连妈都不认识了 – M8 新固件9.6.X 试用体验
• M8 到手 内牛满面
• 乱翻乱教 – 时尚导航设计 – 傻瓜版教程
• 乱翻乱教 – jQuery图片轮播插件 – 菜鸟版

Photoshop 超级可爱小鸡

作者：Vaclav 此人的blog 很帅气··· 膜拜ing
制作工具：Adobe Photoshop cs3
原文地址：猛击此链接 (英文强悍的可以参考原文)
发现工作后就没有好好的干过自己爱干的事情(不想说做爱做的事)，reader上的tutorial 堆积如山，不过有人说的好，时间挤挤还是有的。
想到不知不觉订阅快200了，还是多写写吧，就当自己前进的动力，最近还是有挺多东西要写的，听飞鱼娓娓道来 ^___^

今天更新的东西是tutorial 上一个小鸡的制作，总体比较简单，有点小技巧，简单不简单。相信对初学者会有很大的帮助，像我这样的菜鸟也就做做小教程吧，谁让我爱分享，咩哈哈哈·~

最终效果

步骤1

新建一个文档，多大无所谓，够大就行，我用的是500×400，用形状工具画两个圈(按住shift 可以在同一个图层画两个圆)。用钢笔工具按住ctrl点击下图中的节点适当修一下形状。这个应该很简单吧，不用我教，什么？ 钢笔怎么修不会？ =，= 往下看
效果如下：

钢笔工具(P) 在使用的时候 可以配合ctrl，shift，alt  可以完成很多好玩的东东，你可以自己试试看，自己总结。 

步骤2

接下来用选择工具(A)选中头部的圈，按住shift 选中另外一个圈，(或者直接在界面拖动选中两个也可以)，点击上面 “组合” 就可以把两个圈圈合并，当然是不能分开的，所以要细心 接下来要使用钢笔工具将接口部分变得平滑。
如下图，钢笔工具在线上的3钟状态如下图中右侧的样子， 分别是添加节点，删除节点，和重置平滑 (重置平滑，是按住alt在线上出现的，单击就是不平滑(角)，可以拖动重新拉平滑度，这个东西在调整曲线的时候非常有用。)

调整后的效果如下：

您可能还对这些日志感兴趣

• 乱翻乱教-编号004-用photoshop制作绚丽的星球
• 设计部培训第二课
• 乱翻乱教-Photoshop-剪贴蒙版妙用
• 乱翻乱教-编号003-Photoshop 制作 字体冒烟效果
• 出水芙蓉的绿色 oh~ 美女?

时尚导航设计 – 傻瓜版教程

作者：飞鱼
制作工具：Photoshop cs3
最近给一个朋友的一个教育类的网站 做了个设计稿，后来因为公司开始忙了，就只弄了个设计稿，就这么停掉了，说来也惭愧，人懒啊~，不过也不吝啬，整理了一下这个头部的制作过程放出来分享给大家。希望有所收获
最近yupoo，发神经了，然后又被花花教导了一下，把图片放在MT上了。 = =

最终效果

步骤1 准备工作

首先当然是新建文件啦，尺寸为 1150*1000，

按ctrl+R调出标尺。设置标尺的单位为“像素”(在标尺上右键)，然后在左边的标尺上拖动，拉出参考线
分别拉一条参考线在100px，和1050px
飞鱼：我比较喜欢950px的布局，两边各留100px的留白。

拉好参考线的效果图 如下：

步骤2 制作顶部导航

通常一个网站的头部包括一个 顶部的导航，显示欢迎， 登录，帮助等信息。
新建一个图层(topline)，使用矩形工具，在顶部，画一个颜色为#e9e9e9 的矩形，高度为25像素左右。(可以根据自己喜好调整)

您可能还对这些日志感兴趣

• 乱翻乱教 – M8开发环境(vs2008)配置 [菜鸟版]
• 乱翻乱教 – jQuery图片轮播插件 – 菜鸟版
• 发现一个jQuery初学者的天堂
• 飞鱼的乱翻乱教-编号002-美味青苹果
• 飞鱼的乱翻乱教-编号001-水晶质感icon

jQuery图片轮播插件

作者：飞鱼
制作工具：notpad++
使用语言：javascript
最近写的这个图片轮播插件，于是乎拿出来晒晒，分享点菜鸟心得。大虾可以旁观^_^

功能描述

就是一个简单的js轮播，第一张图变白，然后切换成第二张图。鼠标放上去后图片不切换，移开又开始了。 可以给组图片加效果，并且不冲突。
有空补一下 代码注释，以及 setInterval 的应用

演示效果图

演示地址： 跳转地址

js 代码

(function($) {
  $.fn.fadPicture = function(d) {
    var df = 3000;
    delay = d ? (d < df ? df : d) : df;
    $(this).each(function(i){
      var t = $(this),
        mc = function(){
          var  ul = t,
            first = ul.find('li:first');
          ul.fadeOut('show',
            function(){
              first.appendTo(ul);
            }
          );
          ul.fadeIn();
        };
      var interval = setInterval(function(){
        mc();
      }, delay);
      t.hover(
        function(){
          clearInterval(interval);
          t.data('start',false);
        },
        function(){
          interval = setInterval(function(){
            mc();
          }, delay);
        }
      );
    });
  };
})(jQuery);

使用方法

$(document).ready(function(){
  $('.fadPicture').fadPicture();
  // $('.fadPicture').fadPicture(5000);  //时间5秒
});

html写法

<ul class="fadPicture">
      <li><img src="http://001.jpg" alt="001" /></li>
      <li><img src="http://002.jpg" alt="001" /></li>
      <li><img src="http://003.jpg" alt="001" /></li>
    </ul>

您可能还对这些日志感兴趣

• 发现一个jQuery初学者的天堂
• 乱翻乱教 – M8开发环境(vs2008)配置 [菜鸟版]
• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad
• 隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)

于是乎，向笨笨先生(我哥)讨教了几番，得出了这么一个jquery menu 插件。代码依然很简单，稍微复杂点，可以在按钮放上去的时候触发一个动画效果，离开也可以触发一个动画效果，还添加了延迟释放效果(鼠标移开后有个缓冲，再消失)

代码如下：

(function($) { //N级导航插件
  $.fn.menu = function(options) {
    options = $.extend({
      delay: false
    }, options);

    this.find('li:has(ul)').hover(
      function() {
        var t = $(this);
        t.data('hide_menu', false);
        t.find('>ul').css('display', 'block'); // 可以换成动画效果
      },

      function() {
        var t = $(this);
        t.data('hide_menu', true);
        var hide_menu = function() {
          if (t.data('hide_menu')) {
            t.find('>ul').css('display', 'none'); // 可以换成动画效果
          }
        };
        options.delay ? setTimeout(hide_menu, options.delay)
            : hide_menu();
      }
    );
  };
})(jQuery);

代码非常简练，可以根据实际需求增加其他效果。
使用方法如下：

jQuery(function($) {  //调用插件
  //$('.menu').menu() //默认调用语法;
  $('.menu').menu({delay: 500}); //延迟500ms释放
})

PS：演示地址

您可能还对这些日志感兴趣

• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad
• 隔山打牛 – jQuery中 trigger() & bind() 使用心得 (二)
• 老汉推车 – jQuery中 trigger() & bind() 使用心得 (一)
• 乱翻乱教 – jQuery图片轮播插件 – 菜鸟版

jQuery 制作仿DNF首页导航菜单效果

作者：飞鱼原创
飞鱼: 偶然发现这个东东很实用，就手把手写了个。
DNF首页的那只导航，似乎纯手写的。我这次要写的是用jquery来制作，制作代码非常极其简单，看了就知道怎么做(老鸟可以绕过哈，谁让咱们都是菜鸟 = =)

最终效果图

支持N级导航(添加子导航无需另外添加代码)。

html代码

首先当然是html啦，代码如下，没有什么技术含量，

<div class="menu" >
    <ul>
      <li>
        <a href="#">游戏介绍</a>
        <ul>
          <li><a href="#">升级体验</a></li>
          <li class="sub">
            <a href="#">游戏2</a>
            <ul>
              <li><a href="#">天赋系统</a></li>
              <li><a href="#">升级体验</a></li>
            </ul>
          </li>
          <li><a href="#">故事背景</a></li>
          <li><a href="#">职业介绍</a></li>
        </ul>
      </li>
      <li><a href="#">天赋系统</a></li>
    </ul>
  </div>

css代码

因为是仿dnf官方首页导航，所以样式也多少参考了一下它的样式，(图片我也给扣过来了 嘎嘎)

.menu{
  height:27px;
  float:left;
  background:#1d1d1d url(http://ossweb-img.qq.com/images/dnf/web200812/box_bg1.gif) repeat;
  border:2px solid #000;
}
.menu ul{
    border:1px solid #3f3f37;
    height:25px;
    float:left;
}
.menu li{
  float:left;
  position:relative;
  text-align:center;
  width:70px;
  background:url(http://ossweb-img.qq.com/images/dnf/web200812/img.gif) no-repeat -480px 9px;
}
.menu li .sub{
  background:url(http://ossweb-img.qq.com/images/dnf/web200812/img.gif) no-repeat -420px 9px;
}
.menu li a{
  color:#b29056;
  display:block;
  height:25px;
  line-height:25px;
}
  .menu li a:hover{
    color:#fff;
    text-decoration:none;
  }
  .menu li ul{
    position:absolute;
    top:25px;
    left:-1px;
    display:none;
    width:68px;
    height:auto;
    float:none;
    border-bottom:none;
    background:#1d1d1d url(http://ossweb-img.qq.com/images/dnf/web200812/box_bg1.gif) repeat;
  }
  .menu li ul a{
    display:block;
    height:25px;
    line-height:25px;
  }
    .menu li ul a:hover{
      background:#070707 url(http://ossweb-img.qq.com/images/dnf/web200812/r_linkbg.gif) repeat;
    }
  .menu li ul li{
    position:relative;
    width:68px;
    border-bottom:1px solid #3f3f37;
    background:none;
  }
  .menu li li ul{
    position:absolute;
    top:-1px;
    left:68px;
  }

js代码

这个代码，可以说是相当滴简单，只用了一只语法(.hover)。
说明一下代码的用处细节：(菜鸟专用，老鸟请跨过去 = =)

$(document).ready(function(){
  $('.menu li').hover(  //给menu 下的所有li 添加 hover 动作
    function () {   //鼠标在li 上时让 li 下的ul 显示出来
      $(this).children('ul:first').css('display', 'block');
    },
    function () {  //鼠标在离开li 上时让 li 下的ul 隐藏掉
      $(this).children('ul:first').css('display', 'none');
    }
  );
});

上面代码中我用:first 来只取第一个来提高效率(不知道我这样做对不对，感觉上应该是对的 – -)。

PS：代码演示，因为最近用的都不是自个儿的电脑，FTP上不去，就委曲下自己 尝试一下呢，效果还是不错的。

PS2：可以在这基础上增加其他功能：比如鼠标离开后，过半秒中导航才消失，这个需要用到setTimeout 函数来解决。有空我写个。^_^

您可能还对这些日志感兴趣

• 菜鸟级: 标签切换效果 – JQuery实现
• 滚动新闻 – jquery 扩展插件
• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• 系统级应用项目中的函数命名冲突问题
• 走马观花 – jQuery调试工具- jQuery pad

用photoshop制作一个星球

作者：Greg Martin
制作工具：Adobe Photoshop
原文地址：猛击此链接 (英文强悍的可以参考原文)
飞鱼: 偶然发现这个东东非常绚丽，就狠下心来把它啃下来分享大伙。
由于笔者用的是photoshop7的跟我现在的cs3相去甚远，于是我就简单看了一下原文，做了一下，然后自己整理出这个教程。步骤相当简单，但意义深远，亲手做过一遍才能领会。

最终效果

步骤1：绘制背景

首先当然是新建一个600*500左右的文件。填充背景为黑色，新建一层“星球”，在场景中绘制一个白色正圆。如下图：

飞鱼：可能你会纳闷为什么要画个白色的？继续往下看
新建一层“光照”，在“光照”层上右键- 创建剪贴蒙版，然后用选区工具圈出如下图的选区(当然你可以不圈，不影响)，使用渐变工具在“光照”层拉出如下图的渐变，渐变颜色为“#774c2f”~“#ffffff”。效果如下：

这时候大概有个星球的阴影啦^_^，那么继续。由于发现这个“阴影”渐变太平滑，看着有点假，于是加了如下步骤来解决这个问题。选择“光照”层，自由变换(ctrl+T)，在图上右键，选择变形，将中间部分的黑色阴影稍微往上扯一下，这样就比先前好多了。如下图：

好的看下效果图，嗯~这还是不像星球 =。= 不急，后面还有

您可能还对这些日志感兴趣

• 乱翻乱教 – 小鸡快跑 – Photoshop 超级可爱小鸡
• 设计部培训第二课
• 乱翻乱教-Photoshop-剪贴蒙版妙用
• 乱翻乱教-编号003-Photoshop 制作 字体冒烟效果
• 出水芙蓉的绿色 oh~ 美女?

最近开始狂啃JS，因为上个月去淘宝UED撞墙了，因为那边的“叔叔”们，一直都强调技术，特别是JS @_@ 。然后就被派遣回来了。

飞鱼：如果你跟我有同样遭遇的话，那么，一起学JS吧 嘎嘎···

得···切如正题。
=========== 华丽的分割线 =============

这文章是james.padolsey那看得，觉得挺有启发的，于是就翻译过来给大伙看看。

使用JS输出HTML串最快的方法

作者：James Padolsey
原文地址：猛击此链接(英文强悍的可以参考原文)
当需要将一大堆数组转换成固定格式的html，以下有几种实现方法。
注意：当然你可以直接手动将数组转换成html，如果那样的话，你就很有前途了^_^

方法一，拼接法

这种写法虽说不是最慢的，但是用的人却是最多的。额，貌似我以前都这么用

var arr = ['item 1', 'item 2', 'item 3', ...],
    list = '';

for (var i = 0, l = arr.length; i < l; i++) {
    list += '<li>' + arr[i] + '</li>';
}

list = '<ul>' + list + '</ul>';

就是使用for循环将每个数组使用字符串拼接起来的意思。

以后千万不要用这种啦，又丑又慢=。=

方法二，堆栈法(我起的名，=。=)

var arr = ['item 1', 'item 2', 'item 3', ...],
    list = [];

for (var i = 0, l = arr.length; i < l; i++) {
    list[list.length] = '<li>' + arr[i] + '</li>';
}

list = '<ul>' + list.join('') + '</ul>';

稍微比拼接法快些，但还不够完美。这次的代码使用了.join 方法 比上一种稍微高级了点，但是还是有万恶的for循环

方法三，圣杯(应该是说最佳办法吧)

var arr = ['item 1', 'item 2', 'item 3', ...];

var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

看过后面的测试结果，你就会相信我说的，这是最快的方法。当然你也可以最近去测试一下。
作者很有自信，说这方法是最快速的。因为使用了join方法并且去掉了for循环，代码相当简洁，相比我以前老用的方法一，不禁大叫：oh 屎~~

浏览器测试

有图有真相

原文我就不翻译了，我的个人水平有限，从上图可以看出，大部分浏览器在处理以上代码时，第三种方法相对最快，但是chrome浏览器优点变态，估计是他独有的js 引擎在起作用吧。果然BT。

======补充======

原文下面评论提出了些问题：说如果数组里么有东西的话就只输出UL会有问题，说要使用三元式来解决。

您可能还对这些日志感兴趣

• 一知半解 – 分析淘宝商城首页的 lazy load 功能
• js跨域问题
• 判断输入的字符是否为中文
• 乱翻乱教- jQuery 制作N级导航菜单
• 菜鸟级: 标签切换效果 – JQuery实现

课程纲要:

• 专题制作需求分析
• 框架制定
• 设计要点(栅格系统)
• 模板制作
• 切页技巧
• 目录分类技巧
• PS小技巧 分析
• 实例操作

如果谁有兴趣的话可以给我留言, 我把PPT以及资料发你,然后自己YY
如果你是杭电的话, 且迫切想学的话, 也可以留言, 飞鱼我想办法把教室搞大,然后一起YY
如果你对本培训有更好的见解的话,欢迎现场YY.

还有一些我分享的PS小技巧,我只是提了下技巧名称,只是现场演示了一遍,如果对其中有不了解的话, 我下次写个教程什么的分享一下.

您可能还对这些日志感兴趣

• 乱翻乱教 – 小鸡快跑 – Photoshop 超级可爱小鸡
• 从UI到UED – 阿里日文站
• 乱翻乱教-编号004-用photoshop制作绚丽的星球
• 设计部培训第一课
• 乱翻乱教-Photoshop-剪贴蒙版妙用

课程纲要:

• 页面设计中的滚动字幕
• 特殊导航的制作
• 审美观
• PR值和SEO
• 设计流程
• 专题网站(女生节)
• 软件分享
• 学习方法
• 酷站分享

如果谁有兴趣的话可以给我留言, 我把PPT以及资料发你,然后自己YY
如果你是杭电的话迫切想学的话, 也可以留言, 我想办法把教室搞大,然后一起YY
如果你对本培训有更好的见解的话,欢迎现场YY.

您可能还对这些日志感兴趣

• 从UI到UED – 阿里日文站
• 设计部培训第二课
• 小灰狼都被扼杀了–灰度在不同质量LCD的呈现问题
• 懒出风格，懒出境界 – 飞鱼很懒
• 要的是过程–互联网的用户体验设计过程