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)

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

切图小贴士-教程分享

来源: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切图的一点小经验,如有错误或不足的地方请大家指正,同时欢迎大家分享更多的切图经验与技巧。

移动设备切图

来源:尧子   作者:尧子

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

移动设备切图

移动设备切图

移动设备切图

移动设备切图

手机网站的宽度自适应

如何设置使得手机网站的宽度能够自动适应手机屏幕的大小呢?下面介绍两种方法解决这个问题。

方法一:

在网页的<head>中增加如下这段代码,可以让网页的宽度自动适应手机屏幕的宽度。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />

其中:

width=device-width :表示宽度是设备屏幕的宽度

initial-scale=1.0 :表示初始的缩放比例

minimum-scale=0.5 :表示最小的缩放比例

maximum-scale=2.0 :表示最大的缩放比例

user-scalable=yes :表示用户是否可以调整缩放比例

如果希望打开网页就自动以原始比例显示,不允许用户修改的话,则将以上代码修改为:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no” />

方法二:

把页面最顶部类似下面这段代码:

<!DOCTYPE ……..>

替换为:

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

注:此方法在iPhone下横屏时宽度会超过屏幕宽度出现滚动条,解决方法就是加上方法一的代码。

如何判定用户是否关注微信公众号

if (empty($openid)){
        if (empty($_REQUEST["code"])) {
            $url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=".$APPID."&redirect_uri=".$redirect_url."&response_type=code&scope=snsapi_base&state=blinq#wechat_redirect";
            echo $this->assign('url', $url)->fetch('redirect');
            return;
        }else{
            $code = $_REQUEST['code'];
        
            $APPID = C("APPID");
            $SECRET = C("SECRET");
            $accessTokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" . $APPID . "&secret=" . $SECRET . "&code=$code&grant_type=authorization_code";
            $ch = curl_init($accessTokenUrl);
            curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 5.1; rv:21.0) Gecko/20100101 Firefox/21.0');
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
            $info = curl_exec($ch);
            $dataJson = json_decode($info, true);
            $openid = $dataJson['openid'];
            $userdata = $table->get_subscribe_res($openid);
            $subscribed = $userdata['data']['subscribed'];
            if($subscribed){
                session("openid", $openid);
            
            }else{
                $url="http://www.oschina.net/code/step1?catalog=";
                echo $this->assign('url', $url)->fetch('redirect');
                return;
            }
        }
    }

js自动给url加入新参数

前阵子做了个项目,客户要求用户手机登陆时分享链接给好友可以带上自己的uid,并且所有的页面都要带上自己的ID,原程序猿的写法是将所有要跳转的页面href中都加入全局变量用户ID,发现问题颇多还比较麻烦,所以找到了这个JS来解决问题,它可以自动判断加的参数之前是?还是&,十分实用。

function UrlUpdateParams(url, name, value) {
var r = url;
if (r != null && r != ‘undefined’ && r != “”) {
value = encodeURIComponent(value);
var reg = new RegExp(“(^|)” + name + “=([^&]*)(|$)”);
var tmp = name + “=” + value;
if (url.match(reg) != null) {
r = url.replace(reg, tmp);
}
else {
if (url.match(“[?]“)) {
r = url + “&” + tmp;
} else {
r = url + “?” + tmp;
}
}
}
return r;
}
var uid = “{$smarty.session.user_id}”;
var ouid = “{$smarty.get.u}”
if(uid!=” && ouid == ”){
window.location.href = UrlUpdateParams(window.location.href, “u”, uid);
}

用chrome模拟微信浏览器访问需要OAuth2.0网页授权的页面

现在很流行微信网页小游戏,用html5制作的小游戏移过来,可以放到微信浏览器中打开,关键是可以做成微信分享朋友圈的形式,大大提高游戏的传播,增强好友的游戏互动。

微信浏览器中打开网页游戏效果还不错,对手机要求不高,而且微信网页游戏不用考虑手机兼容性问题,采用html5,而且大部分手机浏览器,特别是微信浏览器对html5的支持很高。

怎么把别人的微信网页游戏移植到自己的网站上并分享给好友呢?

许多网站的微信网页游戏都设置了判断浏览器,只有使用微信浏览器打开才能访问,这使我们在电脑上打开网址找不到源代码。方法很简单,我们可以伪造微信浏览器HTTP_USER_AGENT,从而在pc上可以访问,这样就可以获取你想要的css,js,html等资源,移植到自己的网站上。

如何伪造微信浏览器HTTP_USER_AGENT

使用谷歌浏览器非常方便伪造微信浏览器HTTP_USER_AGENT,打开你需要伪造HTTP_USER_AGENT的网页,按F12,进入开发者模式,下面默认是显示css调试的工具,你找到下面一排,有个图片所示的地方:

用谷歌浏览器如何伪造微信浏览器HTTP_USER_AGENT

用谷歌浏览器伪造微信浏览器HTTP_USER_AGENT

这里有一个模拟器,既可以设置模拟很多型号的手机设备,也可以伪造你想要的HTTP_USER_AGENT。选择USER_AGENT,选other,微信的HTTP_USER_AGENT是:

在iPhone下,返回

Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B176 MicroMessenger/4.3.2

在Android下,返回

Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5660 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 MicroMessenger/4.5.255

经过这样的设置之后,你刷新就可以访问之前不能访问的网页了,现在你就是伪装成微信浏览器访问,同时你使用谷歌浏览器查看源代码,就可以找到资源的路径了。

php 异步发送邮件

在某系统里,上传完一个产品的补丁文件或发布产品的更新信息,需要给使用该产品的用户(用户数量较多)发送一封电子邮件,发送后提示发送完毕!

我们常用的PHP代码写法如下:

<?php
// ……
//查找出所有使用该产品的用户email地址,假设存放在$email数组中
for($i=0;$i<count($email);$i++){
sendemail();
}
function sendemail(){
//发送邮件代码
}
//……

假设该次发送100封邮件。本次操作会出现什么结果呢?

用户体验:用户等待->发送邮件完毕->返回信息(这期间极有可能,脚本执行超时)

本次操作由于需要发送大量的邮件,导致php执行时间过长,用户烦躁的等待。当apache或者nginx等待超过允许执行时间,将返回超时错误。这个时候用户不明确本次操作到底成功与否,到底发出了几封邮件。

由此我们可以看出以上代码用户体验极差,并且不能够顺利完成任务。

那么如何解决这个用户体验较差的问题呢?

这里提到一个概念,异步执行

用户体验:用户等待->发送完毕

朋友们就会问,怎么缺少发信环节?

OK,发信环节就在用户提交请求的时候,把发信任务转给了一个单独处理发信的php程序处理了,当用户看见“发送完毕”的时候其实信还没发送完,这个时候,发信程序正在后台努力的工作着,一封一封的向外发送。

<?php
$domain=”www.phpernote.com”;
$url=”/sendEmail.php”;
$par=”email=1@163.com,2@163.com,3@163.com&time=”.time();
$header=”POST $url HTTP/1.0rn”;
$header.=”Content-Type: application/x-www-form-urlencodedrn”;
$header.=”Content-Length: “.strlen($par).”rnrn”;
$fp=@fsockopen ($domain,80,$errno,$errstr,30);
fputs($fp,$header.$par);
fclose($fp);
echo ‘发送完毕’;

PHP中file_get_contents与curl比较

最近做接口项目,总是会用到这两个PHP方法,也查阅了相关的文章,收集了以下这些比对

(1)fopen/file_get_contents 每次请求远程URL中的数据都会重新做DNS查询,并不对DNS信息进行缓存。但是CURL会自动对DNS信息进行缓存。对同一域名下的网页或者图片的请求只需要一次DNS 查询。这大大减少了DNS查询的次数。所以CURL的性能比fopen/file_get_contents 好很多。

(2)fopen/file_get_contents在请求HTTP时,使用的是http_fopen_wrapper,不会keeplive。而curl却可以。这样在多次请求多个链接时,curl效率会好一些。(设置header头应该可以)

(3)fopen/file_get_contents函数会受到php.ini文件中allow_url_open选项配置的影响。如果该配置关闭了,则该函数也就失效了。而curl不受该配置的影响。

(4)curl可以模拟多种请求,例如:POST数据,表单提交等,用户可以按照自己的需求来定制请求。而fopen/file_get_contents只能使用get方式获取数据。

(5)fopen/file_get_contents 不能正确下载二进制文件。

(6)fopen/file_get_contents 不能正确处理ssl请求。

(7)curl 可以利用多线程。

(8)使用 file_get_contents 的时候如果 网络出现问题, 很容易堆积一些进程在这里。

(9)如果是要打一个持续连接,多次请求多个页面。那么file_get_contents就会出问题。取得的内容也可能会不对。所以做一些类似采集工作的时候,用curl做替代是一个比较正确的选择。

总体比较下来,curl请求优化性比file_get_contents是仁者见仁智者见智,不过在对应的环境中还是要选择合适的请求方法最佳。

利用@media screen实现网页布局的自适应

经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,

优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小

只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值

@media screen and (min-width:1200px){
	#page{ width: 1100px; }#content,.div1{width: 730px;}#secondary{width:310px}
}

@media screen and (min-width: 960px) and (max-width: 1199px) {
	#page{ width: 960px; }#content,.div1{width: 650px;}#secondary{width:250px}select{max-width:200px}
}
@media screen and (min-width: 768px) and (max-width: 959px) {
	#page{ width: 900px; }#content,.div1{width: 620px;}#secondary{width:220px}select{max-width:180px}
}
@media only screen and (min-width: 480px) and (max-width: 767px){
	#page{ width: 450px; }#content,.div1{width: 420px;position: relative; }#secondary{display:none}#access{width: 450px; }#access a {padding-right:5px}#access a img{display:none}#rss{display:none}#branding #s{display:none}
}
@media only screen and (max-width: 479px) {
	#page{ width: 300px; }#content,.div1{width: 300px;}#secondary{display:none}#access{width: 330px;} #access a {padding-right:10px;padding-left:10px}#access a img{display:none}#rss{display:none}#branding #s{display:none}#access ul ul a{width:100px}
}