风吹走了我

利用PHP获取Google PR值代码片段

用php的方法取谷歌的PR值。事实上我已经很久没关注PR值了，PR值 也不像以前那样备受关注，影响力有所下降。 

function pagerank($domain)
{
$StartURL = "http://toolbarqueries.google.com/tbr?client=navclient-auto&features=Rank&q=info:";
$GoogleURL = $StartURL.$domain. '&ch='.HashURL($domain);
$fcontents = file_get_contents("$GoogleURL");
$pagerank = substr($fcontents,9);
if (!$pagerank) return "0";else return $pagerank;
}
 
function HashURL($url)
{
$SEED = "Mining PageRank is AGAINST GOOGLE’S TERMS OF SERVICE.";
$Result = 0x01020345;
for ($i=0; $i<strlen($url); $i++) { $Result ^= ord($SEED{$i%87}) ^ ord($url{$i}); $Result = (($Result >> 23) & 0x1FF) | $Result << 9;
}
return sprintf("8%x", $Result);
}
 
echo pagerank("saycn.net");

如果是64位的系统，上面的代码运行不了，HashURL的函数换为下面的。 

function HashURL($url)
{
$SEED = "Mining PageRank is AGAINST GOOGLE’S TERMS OF SERVICE.";
$Result = 0x01020345;
for ($i=0; $i<strlen($url); $i++) { $Result ^= ord($SEED{$i%87}) ^ ord($url{$i}); $Result = (($Result >> 23) & 0x1FF) | $Result << 9 & 0xFFFFFFFF;
}
return sprintf("8%x", $Result);
}

2014年11月11日 by 技术相关

如何使用Php实现Google /Baidu Ping服务快速收录

玩过WORDPRESS的朋友应该都知道ping服务吧，通俗点讲它可以在更新文章的时候向Google、baidu及其他支持ping的搜索引擎发送指令然后招呼它们过来，不用傻等他们过来收录了，化被动为主动了。直接贴代码了，很简单的。 

/**
  +------------------------------------------------------------------------------
 * 通知搜索引擎过来抓去最新发布的内容。秒收不是梦
 * 目前仅支持Google和Baidu
  +------------------------------------------------------------------------------
 */
class Ping {
 
    public $method, $callback;
 
    public function method($site_name, $site_url, $update_url, $update_rss) {
        $this->method = '
    < ?xml version="1.0" encoding="UTF-8"?>
    
      weblogUpdates.extendedPing
      
     {$site_name}
     {$site_url}
     {$update_url}
     {$update_rss}
      
    ';
        return $this->method;
    }
 
    public function _post($url, $postvar) {
        $ch = curl_init();
        $headers = array(
            "POST " . $url . " HTTP/1.0",
            'Content-type: text/xml;charset="utf-8"',
            "Accept: text/xml",
            "Content-length: " . strlen($postvar)
        );
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
        curl_setopt($ch, CURLOPT_POST, 1);
        curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
        curl_setopt($ch, CURLOPT_POSTFIELDS, $postvar);
        $res = curl_exec($ch);
        curl_close($ch);
        return $res;
    }
 
    public function google() {
        $this->callback = $this->_post('http://blogsearch.google.com/ping/RPC2', $this->method);
        return strpos($this->callback, "0") ? true : false;
    }
 
    public function baidu() {
        $this->callback = $this->_post('http://ping.baidu.com/ping/RPC2', $this->method);
        return strpos($this->callback, "0") ? true : false;
    }
     
}


下面演示一下如何调用 

$Ping=new Ping();
$Ping->method('xxx博客', 'https://saycn.net/', 'https://saycn.net/xxx', 'https://saycn.net/feed');
$Ping->baidu();
$Ping->google();

2014年11月11日 by 技术相关

PHP去除Html所有标签、空格以及空白

笔者在前几天做微信自定义分享网页的时候，自定义内容的时候需要去除内容的标签并截取部分内容作为简介便用到了下面了的函数，现在笔者把他分享出来，希望能够帮到大家

function cutstr_html($string, $sublen)    
 {
      $string = strip_tags($string);
      $string = trim($string);
      $string = ereg_replace("t","",$string);
      $string = ereg_replace("rn","",$string);
      $string = ereg_replace("r","",$string);
      $string = ereg_replace("n","",$string);
      $string = ereg_replace("    ","",$string);
      return trim($string);
}

2014年11月11日 by 技术相关

微信(weixin)分享网页自定义缩略图、链接、标题和摘要

由于微信分享是通过WeixinJSBridge实现的。所以用户只需要将下面这段Js代码复制到网页中，定义好对应的参数即可 

  var imgUrl = 'https://saycn.net/xxx.jpg';
        var lineLink = 'https://saycn.net/904';
        var descContent = "这是xxx的博客";
        var shareTitle = 'xxx';
        var appid = '';
        
        function shareFriend() {
            WeixinJSBridge.invoke('sendAppMessage',{
                "appid": appid,
                "img_url": imgUrl,
                "img_width": "200",
                "img_height": "200",
                "link": lineLink,
                "desc": descContent,
                "title": shareTitle
            }, function(res) {
                //_report('send_msg', res.err_msg);
            })
        }
        function shareTimeline() {
            WeixinJSBridge.invoke('shareTimeline',{
                "img_url": imgUrl,
                "img_width": "200",
                "img_height": "200",
                "link": lineLink,
                "desc": descContent,
                "title": shareTitle
            }, function(res) {
                   //_report('timeline', res.err_msg);
            });
        }
        function shareWeibo() {
            WeixinJSBridge.invoke('shareWeibo',{
                "content": descContent,
                "url": lineLink,
            }, function(res) {
                //_report('weibo', res.err_msg);
            });
        }
        // 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。
        document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
            // 发送给好友
            WeixinJSBridge.on('menu:share:appmessage', function(argv){
                shareFriend();
            });
            // 分享到朋友圈
            WeixinJSBridge.on('menu:share:timeline', function(argv){
                shareTimeline();
            });
            // 分享到微博
            WeixinJSBridge.on('menu:share:weibo', function(argv){
                shareWeibo();
            });
        }, false);

2014年11月11日 by 技术相关

JS 控制VIEWPORT在微信上正常显示

经常在做移动手机网站的时候由于需要在微信平台推广我们不得不去兼容他。在IOS上由于苹果把控的很好，浏览器内核都是统一的。所以自然没有兼容问题。但是安卓就不同了，碎片化的缘故。加上微信的WEBVIEW是定制过的浏览器，导致和原生的效果不同。下面是一个兼容方案。

首先你要设置meta viewport属性。 

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi, user-scalable=yes">

然后再JS代码中设置如下代码

var viewport = document.querySelector("meta[name=viewport]");
var winWidths=$(window).width();
var densityDpi=640/winWidths;
	densityDpi= densityDpi>1?300*640*densityDpi/640:densityDpi;
if(isWeixin()){
	viewport.setAttribute('content', 'width=640, target-densityDpi='+densityDpi);
}else{
	viewport.setAttribute('content', 'width=640, user-scalable=no');
	window.setTimeout(function(){
		viewport.setAttribute('content', 'width=640, user-scalable=yes');
	},1000);
}
function isWeixin(){
	var ua = navigator.userAgent.toLowerCase();
	if(ua.match(/MicroMessenger/i)=="micromessenger") {
		return true;
	} else {
		return false;
	}

快拿起安卓手机试试吧！

2014年10月30日 by 技术相关

在做WEB前端开发时可以借鉴的规范

一、文件命名规范

images  //图片资源，如果项目多人开发里面还需要用子文件夹分开
fonts    //字体资源，一般就是特殊字体嵌入或者图标字体
styles   //CSS文件
– app.css //reset样式,如果项目小直接写在里面，如果多人开发则需要分开如：app.xxx.css
– app.a.css
– app.b.css
scripts //javascripts
– jquery.js
– app.js //主程序
videos  //视频
sounds //音频
index.html //HTML文件

注：所有文件夹以及文件名都是小写，编码都均采用UTF-8编码

二、书写规范

1.所有HTML标签都必须使用小写。
2.CSS能用id的尽量用id，能复用的要使用class。
3.样式文件要在head标签内，脚本要再底部。
4.如果页面图片量很多，要使用JS脚本按需动态加载。
5.如果要兼容retina屏幕要使用 srcset和-webkit-image来设置2x质量图片。
6.如果文档模式是<!doctype html>可以不用写<br />中的斜杠。（当然包含其他无内容tag）
7.引用脚本和者样式去掉type属性，能节省一点是一点。
8.不管是HTML还是CSS或是JS都需要写注释，代码不仅要自己看得懂，让别人看得懂也很重要。
9.开发的时候CSS不要堆在一行编写，等项目完全编写完后再用压缩工具整体压缩。
10.编写JS的时候开始大括号要跟在语法后面不要另起一行，JS命名方式采用驼峰。

function isEmail(){
   //do something….
}
11.切图的时候如果是全彩图片则使用jpg格式且用80%质量，如果带有透明要使用png24格式。
12.书写链接地址时, 必须避免重定向，例如：href=”http://jinzhe.net/”, 即须在URL地址后面加上“/”。
13.在页面中尽量避免使用style属性,即style=”…”。
14.给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能。
15.能以背景形式呈现的图片, 尽量写入css样式中。
16.重要图片必须加上alt属性; 给重要的元素和截断的元素加上title。
17.CSS属性书写顺序, 建议遵循:  布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属 性写在一起. 属性列举: 布局定位属性主要包括: display & list-style & position（相应 的 top,right,bottom,left） ＆ float & clear ＆ visibility ＆ overflow； 自身属性主要包括: width & height & margin & padding & border & background; 文本属性主要包括：color & font & text-decoration & text-align & vertical-align & white- space & 其他 & content; 我所列出的这些属性只是最常用到的, 并不代表全部。
18.样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码。
19.jQuery变量前面要加$

三、图片规范

1. 所有页面元素类图片均放入images文件夹, 测试用图片放于images/demo文件夹;
2. 图片格式仅限于png,jpg;
3. 命名全部用小写英文字母、 数字、 _ 的组合，其中不得包含汉字、空格、特殊字符；尽量用易懂的词汇, 便于团队其他成员理 解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_1.jpg,btn_submit.png;
4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;
5. 尽量避免使用半透明的png图片;
6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至images目录 下.

四、注释规范

1. html注释: 注释格式 <!–这儿是注释–>, ‘–‘只能在注释的始末位置,不可置入注释文字区域;
2. css注释: 注释格式 /*这儿是注释*/;
3. JavaScript注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 /* 这儿有多行注释 */;

2014年10月30日 by 技术相关

CSS Sprites的优势与切图方法

众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。(现在各大门户网站都在这样使用)

 

下面是一张样图：

Sprite Example

本文的目的并不是讲CSS Sprite如何让一个网站更快，而是说一些使用CSS Sprite的时候的一些最佳实践。

不要等到你完成切片之后才开始sprite.

如果你边切图边写CSS，然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中，你就不得不完全重写你的CSS，你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合，就会比较容易些。

把图片放到它要显示的地方的相对的地方

这个小技巧貌似比较难理解。我直到创建一个比较大的sprite的时候才理解到这一点。比如，如果我们希望一个图片出现在一个元素的左侧：

Sprite positioning example

将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话，当你通过CSS移动背景图片的位置的时候，基本上不可能有其它的小图片意外的出现在它的附近。使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。

定位时避免使用bottom或right等

当使用CSS sprite的时候，只用background-position: bottom -300px或background-position: right -200px;非常容易。这刚开始的时候是可行的，但是问题是，当你在宽度上或高度上扩展相关sprite图片的时候，原先设置的位置可能是错的，因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。

给每个图片足够的空间

就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢？ 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。

例子：

Variable content example

例子中的每个条目都有个带数字的图片作为背景图片。如果你仔细看了上面的那张图片，你可以看到这三个数字图片是如何错开排列的，这样如果内容增多，其它图片就不会意外出现。

不用担心Sprite图片的像素大小

如果你的网站经过良好的设计，那么你将会有一大堆的图片来整合进到sprite里面，这样你就需要你个非常大的sprite来恰当的放置这些图片。这是很不错的。sprite里的空白不会占用太多的文件大小。addons.mozilla.org上使用的Sprite图片有1,000px×2,000 px那么大，但是图片的大小仅仅16.7kb!

简单介绍一下 CSS Sprites 的优点：

  • 当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多。
  • CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。

CSS Sprites的优势与切图方法

实现方法：

  1. 首先将小图片整合到一张大的图片上
  2. 然后根据具体图标在大图上的位置，给背景定位。
    background-position:-8px -95px;
2014年10月28日 by 技术相关

PSD网页切图制作HTML全过程教程

今天的这个教程，教大家如何把psd页面利用div+css切割成html页面，这类的教程，本站做的一直都很少，大多讲的都比较零碎的一些东西，在今后，我们将慢慢发布翻译出更多这类的教程，供大家学习，转载请著名来源，以及站码翻译，谢谢….

首先看看效果

下面的图片就是效果图，切割出来后，可能头部和底部会宽点…..

Code a Web Template from PSD to HTML

新建文件夹

开始时，在您的计算机中创建一个文件夹。我把它命名为zmool。再在文件夹中创建新文件夹images，放网站的所有图像。接下来打开代码编辑器（Dreamweaver），并在根目录下创建一个HTML文件名为index.html，这是我们的主页模板。现在创建一个新的CSS文件，并将其命名为style.css文件。如下图：

Code a Web Template from PSD to HTML

打开index.html文件。在head标签顶部，添加链接到您的样式表（style.css）。你可以使用下面的代码。 

<link href="style.css" rel="stylesheet" type="text/css" />

头部的代码如下面: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Modern Design Studio</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

建立HTML结构

现在，我们将设置HTML文件结构。设置3个部分（标题，内容，页脚）像下面一样: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">

</div>
<div id="content">

</div>
<div id="footer">

</div>
</body>
</html>

切割背景

我们的PSD文件包含了很多纹理效果，我们要把这些全部切出来，然后，用代码添加到网页上面，使div页面效果和设计的效果达到一致。 

<body>
<div id="header">
  <div id="container">

  </div>
</div>
<div id="content">
  <div id="container">

  </div>
</div>
<div id="footer">
  <div id="container">

  </div>
</div>
</body>

现在在photoshop里面打开原先设计好的, 隐藏所以的图层，除背景层外.

Code a Web Template from PSD to HTML

现在采取的切片工具，选择背景，保存网页web格式按（ALT +shift+Ctrl + S）。然后保存的图像文件夹文件名为background.jpg。

Code a Web Template from PSD to HTML

设置背景样式

打开style.css文件，设置基本样式，还有背景样以及主体部分的宽度，如下代码： 

* {
   margin: 0px;
   padding: 0px;
}
body
{
   background:url(images/background.jpg);
}
#container
{
   margin: auto;
   width: 960px;
}

 

切割头部

返回photoshop，隐藏所以图层，除头部背景外，并用同样的方法，把头部背景图片切割保存为web格式，保存文件名为head.jpg。

编辑头部背景代码

在style.css文件里编辑如下代码: 

#header
{
	background:url(images/header.jpg);
	height:124px;
}

切割头部logo

在这时，切割logo层，隐藏所有图层，包括背景层，如上同样方法切割logo层保存为logo.png，注意：保存为png格式图片

Code a Web Template from PSD to HTML

添加在页面添加logo

现在返回到html中，在#header #container内,添加下面的代码<div id=”logo”>….</div>. 

<div id="header">
   <div id="container">
      <div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div>
   </div>
</div>

现在, 下面切换到style.css文件，编写#logo样式. 

#logo
{
	margin-top:20px;
	border:none;
}

编辑导航代码

下面是页面里的代码，头部header包括logo和导航两个部分. 

<div id="header">
   <div id="container">
      <div id="logo"><a href="#"><img src="images/logo.png" class="logo"></a></div>
      <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
   </div>
</div>

导航样式如下：

现在,添加css表里的导航样式~，ul、li和链接a的样式: 

#header li
{
	color:#959595;
	list-style:none;
	float:left;
	margin-right:20px;
	font-family:"Myriad Pro",arial;
	font-weight:bold;
	font-size:24px;
}
#header li a
{
	color:#959595;
	text-decoration:none;
	padding:10px;
}
#header ul
{
	float:right;
	margin-top:-40px;
}
#header li a:hover
{
	background:#202020;
	color:#d2d2d2;
	-moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius:5px;
}

现在制作中间部分

现在我们在页面的中间部分content添加两个div，如下图： 

<div id="content">
  <div id="container">
      <div id="featured">

     </div>
     <div id="paragraphs">

     </div>
  </div>
</div>

切换到photoshop的psd页面, 切下中间部分，取名为featured.jpg.如下图：

Code a Web Template from PSD to HTML

 

在你的HTML页面添加如下代码， 和一些文字介绍: 

<div id="content">
  <div id="container">
     <div id="featured">
       <a href="#">MORE PROJECTS</a>
       <p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have you
	   ever wanted to create clean and nice portfolio design? In this tutorial I
	   will show you how to design clean blue portfolio layout. Have you ever wanted
	   to create clean and nice portfolio design? In this tutorial I will show you how
	   to design clean blue portfolio layout in Adobe Photoshop.</p>
     </div>
     <div id="paragraphs">

     </div>
  </div>
</div>

在PSD文件里，隐藏其他所以图层，只留下按钮图层部分，切下按钮部分，保存png格式，命名为button.png.

Code a Web Template from PSD to HTML

现在我们把这些图片添加到页面中去，切换到css文件页面，添加如下代码，这里包括背景样式，和按钮的样式. 

#featured
{
	background:url(images/featured.jpg) no-repeat;
	height:381px;
	margin-top:30px;
	margin-left:80px;
}
#featured a
{
	background:url(images/button.png);
	height:30px;
	width:124px;
	text-indent:-9999px;
	position:absolute;
	margin-top:330px;
	margin-left:180px;
}
#featured a:hover
{
	background-position:0px 30px;
}

现在我们添加些dummytext（文字介绍）的样式: 

.dummytext
{
	color:#d2d2d2;
	width:245px;
	margin-top:150px;
	position:absolute;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height:180%;
	margin-left:290px;
}
.dummytext span
{
	font-size:16px;
	color:#191919;
	font-weight:bold;
}

下面添加添加图片展示下面的分类介绍部分

页面的代码部分如下. 

<div id="paragraphs">
       <p class="paragraph">
         <span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>
</div>

我们中间部分的内容，整体看起来应该是这样的: 

<div id="content">
  <div id="container">
     <div id="featured">
       <a href="#">MORE PROJECTS</a>
       <p class="dummytext"><span>Portfolio project, Jan 5th, 2010</span> Have you
	   ever wanted to create clean and nice portfolio design? In this tutorial I
	   will show you how to design clean blue portfolio layout. Have you ever wanted
	   to create clean and nice portfolio design? In this tutorial I will show you how
	   to design clean blue portfolio layout in Adobe Photoshop.</p>
     </div>
     <div id="paragraphs">
       <p class="paragraph">
         <span>BEAUTIFUL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>EFFECTIVE</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>

       <p class="paragraph">
         <span>FUNCTIONAL</span>WebDesignFan is a design related blog about web design, photoshop, freebies
         and tutorials. We publish useful information dedicated to web designers and developers. Here you can find free
         resources like vectors, wordpress themes and a lot of inspiration.
       </p>
     </div>
  </div>
</div>

去你的CSS文件添加下面的代码， 

#paragraphs span
{
	font-family:"Myriad pro", Helvetica, sans-serif;
	font-size:22px;
	font-weight:600;
	letter-spacing:-2px;
}
#paragraphs
{
	margin-left:80px;
	font-family:Arial, Helvetica, sans-serif;
	color:#191919;
	font-size:12px;
	margin-top:15px;
}
.paragraph
{
	width:250px;
	margin-left:15px;
	float:left;
}

这个就是我们到目前位置的效果:

Code a Web Template from PSD to HTML

下面处理网站底部

现在，我们完成该部分内容，我们将开始创建页脚.

首先，在你的PSD文件中，隐藏除页脚和页脚纹理层外的其他层，然后把页脚文件夹的东西切片并保存为footer.jpg.

Code a Web Template from PSD to HTML

然后再切一遍，把按钮和鸟的图形切下来.分别取名为follow.png和 bird.jpg.

编辑底部代码

底部页脚包括一些文字和一个带有链接的小鸟图片.

所以在HTML页面添加如下代码. 

<div id="footer">
  <div id="container">
    <p>2010 © Fictional Design Studio. Design by Webdesignfan.</p>
    <a href="#">Follow us on Twitter</a>
    <img src="images/bird.jpg" />
  </div>
</div>

现在, 编辑底部footer样式的代码，如下: 

#footer
{
	background:url(images/footer.jpg);
	height:71px;
	margin-top:191px;
}
#footer p
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#959595;
	position:absolute;
	margin-top:30px;
}
#footer a
{
	background:url(images/follow.png);
	text-indent:-9999px;
	position:absolute;
	height:27px;
	width:124px;
	margin-left:730px;
	margin-top:30px;
}
#footer img
{
	float:right;
	margin-top:10px;
}

我们用footer.jpg 做页脚的背景，然后添加一些文字的样式.

对于底部的鸟图片的链接，我们用之前同样的办法，利用浮动效果定位。

最终效果

Code a Web Template from PSD to HTML

文件下载地址 (0,7 MB)

到现在就算是结束了，不知道大家有没有看懂，不懂的就留言，什么地方不懂，我再添加修改下，哈哈~ .

2014年10月28日 by 技术相关

切图小贴士-教程分享
来源:uimaker.com   作者:mux

 切图小贴士-教程分享

 

用户手中看到的产品界面，并非设计师呕心沥血创作的效果图，而是一个个单独的切图经由开发同学技术实现。切图作为设计师与开发者之间的桥梁，它的作用很关键，合适的切图、精准的位置可以最大限度的还原效果图的设计，精妙的切图更会有事半功倍的效果哦！

我们经常会做一个俗称“点九”的切图，什么是“点九”呢？“点九”是Android平台处理图片的一种特殊的形式，由于文件的扩展名为：“.9.png”，所以被称为“点九”。“点九”也是由于Android平台多种分辨率需适配的需求下，发展出来的一种独特的技术。它可以将图片横向和纵向随意进行拉伸，而保留像素精细度、渐变质感和圆角的原大小，实现多分辨率下的完美显示效果，同时减少不必要的图片资源，可谓切图利器。

“点九”的制作工具为“draw9patch”，具体制作步骤这里不多讲了，插播小贴士第一条：舍弃这个制作工具吧，减少繁琐的步骤，不要再每张图片都拖到工具里画啦！直接用ps＋铅笔就可以画哦。

“点九”的学问当然很大，但Android切图不仅需要清楚“点九”的方法，还有其他各种小技巧。下面为大家分享我在工作中总结的几个关于切图的心得。
 

(一)站在开发的角度来切图

了解技术实现方式，就像了解一位开发同学，更多的了解，会让工作更加顺畅。
如为下图按钮做“点九”图，一部分同学可能会这样做：


切图小贴士-教程分享

 

这是一张高度不变左右拉伸的“点九”图片，内容显示区域为整个按钮范围。按钮效果图上看，文字是垂直居中显示的，开发同学拿到这张“点九”图片，就会在代码里写上center的属性，此属性就是设定让文字在按钮的垂直居中位置。说到这，有没有察觉出问题呢？先让我们看一下实现出来的效果怎么样。


切图小贴士-教程分享

 

拥有像素眼的设计师们，立刻会察觉文字偏下了。然后找开发同学调整文字的位置，“把文字向上n个像素吧，没有居中”等等，这是很经常发生的对话，开发同学会增加代码微调文字的位置以达到效果图效果。事情圆满解决了吗？不然。其实是我们错了。

当我们了解开发同学实现方法后，我们可以试试用逆推法验证这张“点九”图片是否还有进一步精确的可能。

 

切图小贴士-教程分享


如上图，设计效果图中红色区域是文字排版区域，是理想化的位置，1和2的高度是相等的；而实现效果图中3和4的高度是相等的。问题出现了！在我们画点九的时候，把投影的高度也画进去了，所以视觉上文字就偏下了。

我们通常的画法应该是：

 

 

切图小贴士-教程分享

 

 

1. 在高度不拉伸的情况下，在空白区域点一像素的点。

这是与开发同学之间约定俗成的习惯，凭着默契就知道此按钮高度不进行拉伸，而且就是被拉伸了，拉伸的是空白区域，视觉上也不会造成影响。

对比如图所示：

 


切图小贴士-教程分享


 

2. 内容显示区域的高度要避开投影区域，这样可以保证文字视觉的居中。

“点九”图片的内容显示区域，我喜欢称为内容排版区域。在切图的过程中，还会发现不同的情景，要时刻想着你要的结果，通过对此区域的仔细处理，可以更好的为图片上所承载的内容做排版。这样开发同学只要通过一些简单的属性设定，就可以实现效果图上精确的布局。同时减少不必要的开发，精简代码，提高产品的性能，积少成多，带给用户更好的体验感受。
 

(二)选择更优的切图方式

当我们遇到异形或较为复杂的切图时，往往需要抛开固有的思维程式，去找到更适合的切图方式。举例如为下图浮层切图的时候，我们还可以用我们的利器“点九”么？


切图小贴士-教程分享

 

首先分析一下此浮层的几个特点：一是半透明渐变有厚度又有投影的效果；二是有三角异形，而且位置不固定。在切图的时候先走了一下小弯路，用固有思维把浮层分成了上下两个部分，下面方形做成“点九”，上面三角形单独一个切图，用拼接的方式去实现。这是符合开发同学的原子拆分设计模式的，把会变化的部分取出并封装起来，让其他部分不受到影响。所以开发同学很快做好了实现，但效果不尽人意。我们其实可以预想得到，因为有投影效果上下拼接一定有重叠，这样拼接处就会有一条明显的线。

那怎么办呢？经过设计师的进一步思考，终于找到了一种更适合的切图方式：
切图小贴士-教程分享

 

左右分割成两个“点九”图片，这样即能保证连接处的效果，又能灵活三角指向的位置。思考好如何切图的同时也要跟技术同学沟通能否实现，衡量实现的成本。最后值得高兴的是，实现出来的效果­跟设计效果图没有任何出入。
 

(三)尽可能的减小资源的大小

切图的时候尽可能减小资源的大小，为产品安装包瘦身。
 

1.“点九”图片拉伸1个像素与拉伸10个像素效果上是没有区别的，所以尽量缩小图片的尺寸。

(在上面的例子当中，为了保持看得清楚，没有缩小到最小情况，在实际工作中可以稍加注意。)
 

2.当我们遇到有纹理的背景或有纹理的按钮时，切图原则为：找到纹理的规律，用最小的切图去平铺，可以想象中图案叠加的原理。

第一种纹理背景，如输入法多媒体中随写输入的界面，不同的信纸，我们就用了尽可能最小的切图去平铺而实现的。如下图：


切图小贴士-教程分享

 

这是我们输入法中信纸的切图，遵循用最小切图的原则，按照不同纹理的规律调整到最小的切图，所以可以看出不同纹理的切图尺寸是不一样的。

第二种有纹理的按钮，我们一般会这样处理：


切图小贴士-教程分享

 

我们的目标是把按钮分成三段，保留左右圆角部分，找到中间纹理可复用平铺的部分，同事确保中间纹理可以与左右两张图无缝连接，这样按钮的长度就变成可控的了，可以适用于不同的场景。

首先找到纹理的规律，这里的斜线纹理只需切宽为3px的图即可；然后用纹理图片去尝试左右圆角部分，连接到圆角部分的纹理就成功咯。遇到其他类型纹理切图时，思路是可以复用的。
 

3.适当压缩图片质量，在单色或没有过多效果时可存储为png8位或索引模式。

这里就不做举例了。
 

小结

设计师在提供设计规范后愁苦实现效果不尽如人意的同时，可以尽可能的利用一些切图手段，帮助你的设计达到零差别的呈现，同时也帮助开发同学减少了很多不必要的开发负担，对于产品本身也有提高运行速度等很多不言而喻的好处。让设计师同学与我们亲爱的开发同学成为更贴心更默契的合作伙伴吧！

以上为工作中关于Android切图的一点小经验，如有错误或不足的地方请大家指正，同时欢迎大家分享更多的切图经验与技巧。

2014年10月28日 by 技术相关

移动设备切图
来源:尧子   作者:尧子

在App设计的最后阶段——切图。下面给大家带来有关切图的入门教程，讲讲切图的一些原理、手机大小尺寸，快一起来瞧瞧吧~~

移动设备切图

移动设备切图

移动设备切图

移动设备切图

2014年10月28日 by 技术相关
2024 年 4 月
一 二 三 四 五 六 日
1234567
891011121314
15161718192021
22232425262728
2930