网页设计 | pzg's blog

关闭wordpress的自动草稿

网上目前能找到两种方法：

1、找到wp-admin/includes/post.php里边的get_default_post_to_edit这个函数,

$post = get_post( wp_insert_post( array( 'post_title' => __( 'Auto Draft' ), 'post_type' => $post_type, 'post_status' => 'auto-draft' ) ) );

把这一句修改成如下:

$post_auto_draft = $wpdb->get_row( "SELECT * FROM $wpdb->posts WHERE post_type = '$post_type' AND post_status = 'auto-draft' LIMIT 1" );
if ( $post_auto_draft ) {
$post = $post_auto_draft;
} else {
$post = get_post( wp_insert_post( array( 'post_title' => __( 'Auto Draft' ), 'post_type' => $post_type, 'post_status' => 'auto-draft' ) ) );
}
意思就是: 如果有自动保存的auto-draft就使用以前的auto-draft的ID来写文章,如果没有就插入一条auto-draft, 最后,数据库中总有一条auto-draft... 虽然数据库会多一条数据,但ID还是可以保持连续.

2、找到wp-admin\includes\post.php文件,在if ( $create_in_db ) {前面加上这句代码就可以了：

$create_in_db = false;

分类: 网页设计标签:wordpress 日期:2010-12-27

22个HTML5的初级技巧

5 条评论

1. 新的Doctype声明

XHTML的声明太长了，我相信很少会有前端开发人员能手写出这个Doctype声明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5的Doctype声明很短，看到这个声明相信你马上就能记住，不用浪费脑细胞去记那长的有点变态的XHTML的Doctype声明了。

<!DOCTYPE html>

HTML5的简短的DOCTYPE声明是让Firefox、Chrome等现代浏览器和IE6/7/8等浏览器都进入(准)标准模式，你可能会奇怪IE6/7居然也可以支持HTML5 Doctype，事实上，IE是只要doctype符合这种格式，都会进入标准模式。

2. <figure>标签

看看下面一段简单的代码：

<img alt="About image" src="path/to/image">
<h6>image of Mars.</h6>

遗憾的是，这里的h6标签和img标签好像没有什么关系，语义不够明确。HTML5意识到了这一点，于是就采用了<figure>标签。当<figure>结合<figcaption>标签的使用，可以让h6标签和img标签组合起来，代码就更具语义化了。

<figure>
<img alt="about image" src="path/to/image">
<figcaption>
<h6>This is an image of something interesting. </h6>
</figcaption>
</figure>

3. 重新定义<small>

不久前，我使用了<small>标签来创建与logo相关的副标题。但是在HTML5中重新定义了<small>标签，使之更能表现语义化，在<small>的字号都会变小，想想如果这个标签用于网站的底部的版权信息还是个不错的做法。

4. 去掉了Javascript和CSS标签的type属性

通常你会在<link>和<script>加上type属性：

这有点让人纠结，HTML5并不是XTHML，你可以省去标签中的双引号。相信大多数同志也包括我都习惯了加上双引号，因为这让代码看起来会更标准。不过，这可以根据你的个人喜好来确定是到底要不要双引号。

<h6 id="someid"> start the reactor. </h6>
(更多...)

分类: 网页设计标签:html5 日期:2010-12-24

HTML调用rss

2 条评论

<html>
<head>
<title>javascript读取RSS数据</title>
<META content="text/html; charset=utf-8" http-equiv=Content-Type />

</head>
<body leftmargin="0" topmargin="0">
<font><h3 align="center">javascript读取RSS数据</h3></font>
<br>
<table width="90%" align="center" border="0" cellpadding=0 cellspacing=0>
<tr>
   <td bgcolor=White><b>新闻中心</b><font size="-1">(摘自新浪网)</font><hr></td>
</tr>
<tr>
   <td bgcolor=White>
    <div id="container" >News Loading...</div>
   </td>
</tr>
</table>
<script language="JavaScript1.2">
//Container for ticker. Modify its STYLE attribute to customize style:
var tickercontainer=''
var xmlsource="http://rss.sina.com.cn/news/marquee/ddt.xml";
var root;
var title;
var link;
var items;
var item;
var images;
var image;
var description;
if (window.ActiveXObject)
{
//document.write("Microsoft.XMLDOM");
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation && document.implementation.createDocument)
{
//document.write("document.implementation.createDocument");
var xmlDoc= document.implementation.createDocument("","doc",null);
}
if (typeof xmlDoc!="undefined")
{
//document.write(tickercontainer)
xmlDoc.load(xmlsource)
}
function fetchxml()
{
if (xmlDoc.readyState==4)
   output()
else
   setTimeout("fetchxml()",10)
}
function output()
{
var temp="";
root = xmlDoc.getElementsByTagName("channel")[0];
title =root.getElementsByTagName("title")[0];
//temp = title.firstChild.nodeValue +"<br>";
items=root.getElementsByTagName("item");
for(i=0;i<=items.length-1;i++)
{
   item=items[i];
   title=item.getElementsByTagName("title")[0];
   link=item.getElementsByTagName("link")[0];
   description=item.getElementsByTagName("description")[0];
   temp = temp + "<font size=-1><a href=" + link.firstChild.nodeValue+ " target='_bank'>" +

title.firstChild.nodeValue +"</a></font><br><br>";
//temp = temp +"<font size=-1>" + description.firstChild.nodeValue + "</font><br><br>";
document.getElementById("container").innerHTML = temp;
}
}
if (window.ActiveXObject)
fetchxml()
else if (typeof xmlDoc!="undefined")
xmlDoc.onload=output
</script>
</body>
</html>

分类: 网页设计标签:HTML, RSS 日期:2010-12-22

PHP探针

抢沙发

网上有很多探针，不过各种版本都很老了，而且目前很少人在更新这个东西，最近测试服务器环境网上下了一些探针，各有优缺点。于是找了个时间把各个版本的探针功能揉在了一起，去掉了广告，清爽了许多。

这个探针是自己用来的，不过还是习惯性的分享出来，对于原版的探针不好意思去掉了链接和广告，服务器性能去掉了过时很久的信息，如果有机会，以后会添加上一些最新服务器的测试信息的。

PHP探针下载地址：php探针

分类: 网页设计标签:PHP, 探针日期:2010-12-21

Directadmin自定义404页面

抢沙发

Directadmin控制面板，支持用户自定义404、403、401、500错误页面。

具体操作步骤如下：

1、进入主机控制面板，点击“自定义错误页面”；

2、点击“401.shtml ”、“403.shtml”、“404.shtml”、“500.shtml”即可以进入编辑相关设置页面；

3、编辑完成后，可点击“预览html”进行预览，如不需要修改，则直接点击“保存为”按钮即可成功设置相应错误页面。（注意：错误页面内容必须大于或等于512个字节，不然会自动使用系统内置错误页面）

分类: 网页设计标签:404 日期:2010-10-27

cURL库功能简介

抢沙发

首先，我们得先要确定我们的PHP是否开启了这个库，你可以通过使用php_info()函数来得到这一信息。

<?php
phpinfo();
?>

如果你可以在网页上看到下面的输出，那么表示cURL库已被开启。

如果你看到的话，那么你需要设置你的PHP并开启这个库。如果你是在Windows平台下，那么非常简单，你需要改一改你的php.ini文件的设置，找到php_curl.dll，并取消前面的分号注释就行了。如下所示：

//取消下在的注释
extension=php_curl.dll
如果你是在Linux下面，那么，你需要重新编译你的PHP了，编辑时，你需要打开编译参数——在configure命令上加上“–with-curl” 参数。

一个小示例

如果一切就绪，下面是一个小例程：

<?php
// 初始化一个 cURL 对象
$curl = curl_init();

// 设置你需要抓取的URL
curl_setopt($curl, CURLOPT_URL, 'http://pzg.me');

// 设置header
curl_setopt($curl, CURLOPT_HEADER, 1);

// 设置cURL 参数，要求结果保存到字符串中还是输出到屏幕上。
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

// 运行cURL，请求网页
$data = curl_exec($curl);

// 关闭URL请求
curl_close($curl);

// 显示获得的数据
var_dump($data);
?>
如何POST数据

上面是抓取网页的代码，下面则是向某个网页POST数据。假设我们有一个处理表单的网址http://www.example.com/sendSMS.php，其可以接受两个表单域，一个是电话号码，一个是短信内容。

<?php
$phoneNumber = '13912345678';
$message = 'This message was generated by curl and php';
$curlPost = 'pNUMBER=' . urlencode($phoneNumber) . '&MESSAGE=' . urlencode($message) . '&SUBMIT=Send';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://www.example.com/sendSMS.php');
curl_setopt($ch, CURLOPT_HEADER, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $curlPost);
$data = curl_exec();curl_close($ch);
?>
从上面的程序我们可以看到，使用CURLOPT_POST设置HTTP协议的POST方法，而不是GET方法，然后以CURLOPT_POSTFIELDS设置POST的数据。

关于代理服务器

下面是一个如何使用代理服务器的示例。请注意其中高亮的代码，代码很简单，我就不用多说了。

<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://www.example.com');
curl_setopt($ch, CURLOPT_HEADER, 1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HTTPPROXYTUNNEL, 1);
curl_setopt($ch, CURLOPT_PROXY, 'fakeproxy.com:1080');
curl_setopt($ch, CURLOPT_PROXYUSERPWD, 'user:password');
$data = curl_exec();curl_close($ch);
?>
关于SSL和Cookie

关于SSL也就是HTTPS协议，你只需要把CURLOPT_URL连接中的http://变成https://就可以了。当然，还有一个参数叫CURLOPT_SSL_VERIFYHOST可以设置为验证站点。

关于Cookie，你需要了解下面三个参数：

CURLOPT_COOKIE，在当面的会话中设置一个cookie

CURLOPT_COOKIEJAR，当会话结束的时候保存一个Cookie

CURLOPT_COOKIEFILE，Cookie的文件。

HTTP服务器认证

最后，我们来看一看HTTP服务器认证的情况。

<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://www.example.com');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt(CURLOPT_USERPWD, '[username]:[password]')

$data = curl_exec();
curl_close($ch);
?>
关于其它更多的内容，请参看相关的cURL手册。

分类: 网页设计标签:cURL 日期:2010-10-26

wordpress访客来向和欢迎词

2 条评论

1、把以下代码复制到 WordPress 主题的 functions.php 中：

<?php show_refer_in();?>
3、接下来样式部分仅供参考：

#hellobaby {
background:#000000;
border:1px solid #B3B3B3;
color:#FFFFFF;
font-size:14px;
opacity:0.7;
filter:alpha(opacity=70);
padding:10px;
position:absolute;
right:0;
top:250px;
}

分类: 网页设计标签:wordpress 日期:2010-10-21

部分wordpress函数

4 条评论

set_transient(), get_transient(), delete_transient()
这个函数类似于用于存储检索选项数据库表单的get_options()以及update_options()函数。他们的主要区别在于，你可以给这个临时API函数传递一个时间参数，作为数据库输入的过期日。当参数显示的时间到达之后，输入会被移除。如果你需要缓存数据或查询某个短期时间内的结果，这会是个相当有用的函数。

set_transient的参数：

set_transient($transient, $value, $expiration);
将某个值保留在数据库中一小时：

set_transient('the_name', $special_query_results, 60*60);
结果值：

$value = get_transient('the_name');
WordPress “定时任务”函数

wp_schedule_event(time(), 'hourly', 'my_schedule_hook');
如果你需要定时执行某段代码，像是检查RSS订阅、数据库备份或是重设数据库值等，就可以用到这个函数。

WordPress HTTP API

wp_remote_get( $url, $args = array() );
这是个用于检索网页内容的简单函数。函数把检索结果存储在一个数组里。你不仅可以得到网页的结果内容，还可以获取网页的页头信息和相应代码。

轻松获取RSS 订阅

$feed = fetch_feed( $uri );
fetch_feed是一个用来获取订阅内容的简单WordPress函数。这个函数可以检索、分析并自动缓存订阅内容。

WordPress邮件函数

wp_mail() wp_mail( $to, $subject, $message, $headers, $attachments );
示例：

Example:
$to = 'Example@Example.com';
$subject = 'Hello！';
$message = 'This message was sent by wordpress'
$mail = wp_mail($to, $subject, $message);
if($mail) echo 'Mail delivered';
相当简单实用的函数，利用这个函数你可以发送页头信息和附件、普通文本、HTML信息以及其他各种选项。

计时函数

human_time_diff( $from, $to )
这个函数显示出的时间效果不是普通的时间格式，而是“XXX发布于XXX小时前”这样。

WordPress get_comments函数

get_comments()
在评论循环外检索评论内容。

字符串验证

wp_kses($string, $allowed_html, $allowed_protocols);
如果你需要过滤不受信任的用户输入内容，wp_kses会是个很实用的函数。这个函数确保$string中只出现经许可的HTML元素名称、属性和属性值以及正常的HTML实体。

WordPress文本转换

wptexturize()
这个函数把常用的字符串转换成印刷时采用的正确符号，比如破折号、省略号等，有时也会为某些段落加上排版引号。

wpautop()
给字符串添加<p>标签

WordPress短码API

add_shortcode(), do_shortcode()
add_shortcode()可以快速为你的日志内容创建宏。假设你希望把日志里的某些内容包围在一个div块里，并且加上若干类和id，让你可以创建多个内容栏。你可以用HTML编辑器进行编辑，然后输入下面的内容：

<div class='one_third'>内容</div>
用PHP函数生成WordPress日志wp_insert_post() 这个函数在数据库中插入文章页面和自定义文章类型。它会过滤变量并执行检查，补充日期/时间等缺失变量。如果用户可以通过你的网站前台提交内容，这个函数会相当有帮助。

用PHP函数生成WordPress评论

wp_insert_comment()
和wp_insert_posts类似，不过wp_insert_comment插入的是评论。

WordPress对象缓存

wp_cache_add(), wp_cache_set(), wp_cache_get(), wp_cache_delete, wp_cache_replace(), wp_cache_flush
WP_Object_Cache是WordPress中用以缓存数据的类。

禁止执行WordPress任务

wp_die()
wp_die终止WordPress运行，显示HTML错误信息。

这个函数与PHP函数die()互为补充。HTML信息显示给用户。推荐仅在进程不能再继续时才使用该函数。

分类: 网页设计标签:wordpress 日期:2010-10-20

WEB前端开发规范文档

抢沙发

规范目的

为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改.

基本准则

符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度.

文件规范

1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;

2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;

3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;

4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名.

html书写规范

1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset=”utf-8″ />, 书写时利用IDE实现层次分明的缩进;

2. 非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;

3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:

4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 属性值必须用双引号包括;

6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为html元素添加自定义属性的时候, 首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须以”data-”为前缀来添加自定义属性，避免使用”data:”等其他命名方式;

7. 语义化html, 如标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;

8. 尽可能减少div嵌套, 如<div class=”box”><div class=”welcome”>欢迎访问XXX, 您的用户名是<div class=”name”>用户名</div></div></div>完全可以用以下代码替代: <div class=”box”><p>欢迎访问XXX, 您的用户名是<span>用户名</span></p></div>;

9. 书写链接地址时, 必须避免重定向，例如：href=”http://itaolun.com/”, 即须在URL地址后面加上“/”；

10. 在页面中尽量避免使用style属性,即style=”…”;

11. 必须为含有描述性表单元素(input, textarea)添加label, 如<p>姓名: <input type=”text” id=”name” name=”name” /></p>须写成:<p><label for=”name”>姓名: </label><input type=”text” id=”name” /></p>

12. 能以背景形式呈现的图片, 尽量写入css样式中;

13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;

14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;

15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & ?(?) 等等;

16. 书写页面过程中, 请考虑向后扩展性;

17. class & id 参见 css书写规范.

css书写规范

1. 编码统一为utf-8;

2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;

3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;

4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;

5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.

6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):

a, 通过从属写法规避, 示例见d;

b, 取父级元素id/class命名部分命名, 示例见d;

c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;

d, a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码<div id=”mainnav”></div>中加入新的div元素,

按a命名法则: <div id=”mainnav”><div class=”firstnav”>…</div></div>,

样式写法: #mainnav .firstnav{…….}

按b命名法则: <div id=”mainnav”><div class=”main_firstnav”>…</div></div>,

样式写法: .main_firstnav{…….}

7. css属性书写顺序, 建议遵循布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin　＆　padding　＆　float（包括clear）　＆　position（相应的 top,right,bottom,left）　＆　display　＆　visibility　＆　overflow等；自身属性主要包括: width & height & background & border; 文本属性主要包括：　font　＆　color　＆　text-align　＆　text-decoration　＆　text-indent等；其他属性包括: list-style(列表样式)　＆　vertical-vlign　＆　cursor　＆　z-index(层叠顺序) 　＆　zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;

8. 书写代码前, 考虑并提高样式重复使用率;

9. 充分利用html自身属性及样式继承原理减少代码量, 比如:

<ul class=”list”><li>这儿是标题列表<span>2010-09-15</span></ul>

定义

ul.list li{position:relative} ul.list li span{position:absolute; right:0}

即可实现日期居右显示

10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;

11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;

12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我会初始化表格样式)

13. 杜绝使用<meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> 兼容ie8;

14. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);

15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;

16. 减少使用影响性能的属性, 比如position:absolute || float ;

17. 必须为大区块样式添加注释, 小区块适量注释;

18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;

JavaScript书写规范

1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX项目需求原生开发, 以避免网上down下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || …);

2. 库引入: 原则上仅引入jQuery库, 若需引入第三方库, 须与团队其他人员讨论决定;

3. 变量命名: 驼峰式命名. 原生JavaScript变量要求是纯英文字母, 首字母须小写, 如iTaoLun;

jQuery变量要求首字符为’_’, 其他与原生JavaScript 规则相同, 如: _iTaoLun;

另, 要求变量集中声明, 避免全局变量.

4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;

5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();

6. 命名语义化, 尽可能利用英文单词或其缩写;

7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;

8. 后期优化中, JavaScript非注释类中文字符须转换成unicode编码使用, 以避免编码错误时乱码显示;

9. 代码结构明了, 加适量注释. 提高函数重用率;

10. 注重与html分离, 减小reflow, 注重性能.

图片规范

1. 所有页面元素类图片均放入img文件夹, 测试用图片放于img/demoimg文件夹;

2. 图片格式仅限于gif || png || jpg;

3. 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;

4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;

5. 尽量避免使用半透明的png图片(若使用, 请参考css规范相关说明);

6. 运用css sprite技术集中小的背景图或图标, 减小页面http请求, 但注意, 请务必在对应的sprite psd源图中划参考线, 并保存至img目录下.

注释规范

1. html注释: 注释格式 <!–这儿是注释–>, ’–’只能在注释的始末位置,不可置入注释文字区域;

2. css注释: 注释格式 /*这儿是注释*/;

3. JavaScript注释, 单行注释使用’//这儿是单行注释’ ,多行注释使用 /* 这儿有多行注释 */;

开发及测试工具约定

建议使用Aptana || Dw || Vim , 亦可根据自己喜好选择, 但须遵循如下原则:

1. 不可利用IDE的视图模式’画’代码;

2. 不可利用IDE生成相关功能代码, 比如Dw内置的一些功能js;

3. 编码必须格式化, 比如缩进;

测试工具: 前期开发仅测试FireFox & IE6 & IE7 & IE8 , 后期优化时加入Opera & Chrome & Safari;

建议测试顺序: FireFox–>IE7–>IE8–>IE6–>Opera–>Chrome–>Safari, 建议安装firebug及IE Tab Plus插件.

其他规范

1. 开发过程中严格按分工完成页面, 以提高css复用率, 避免重复开发;

2. 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想.

分类: 网页设计标签:网站日期:2010-10-16

网站更换模板须注意事项

抢沙发

最近看到了一篇文章是在说网站更换模板要注意那些地方是不能改动的，否则这些是会导致搜索引擎对其进行惩罚的。我大概看了下文章内容，这个内容我稍后在后面会贴出主要内容部分，注意的地方在标题关键词摘要 H标签这几个因素上面，那么我相信这文章写出来一定是经过作者的反复试验得出的结论，这样就是说搜索引擎对网站的检索是标记性的记住几个关键标签，会把网页自动翻译成所谓的“百度地图”格式。那么接下来贴出文章参考一下。

一：注意Title的变化。

Title是最重要的部分，搜索引擎的蜘蛛首先会抓取这里，所以在更换模板时首先看此部分是否和原模板相同，如果别人制作的模板Title与你模板Title不同，由于模板<title></title>代码的结构不同，输出的Title也不同，那么应该把新模板的Title改成和老模板一致，因为搜索引擎收录的是老模板的Title。

还有一点，通常在使用CMS时，如DEDEcms，每篇文章的Title都会有“Power by DedeCMS”，如果去掉了，新模板则也应去掉。

二：注意keywords 和description的变化。

最近看了下百度和google的SEO指南，发现keywords已经被搜索引擎抛弃了，我重点说下description，也就是网页描述。卢松松就拿Z-blog来说明，有的博客模板没有description，有的就有，或者有的模板description采用文章的简介标签部分，而有的则采用description+标题+关键字，所以更换模板时也要考虑到description描述部分。
三：注意H1、H2、H3、H4的变化。

这些都是HTML常用语法，按照SEO优化方法，在更换模板时切忌注意新模板的H1-H6标签是否和老模板一致，如果不一致，就改回老模板的样式。这里还有一点是要提醒大家的，在标签中出现关键词是有利于优化的，如你在做“网络推广”这个关键词，那么<h1></h1>或<h2></h2>中尽量加上“网络推广”这几个字。

H1 — 大标题，放置于导航以上的部分，全站通用，用来诠释整个网站的内容，应包含网站主关键字，但切忌不要进行关键字堆砌。通常H1在一个页面只能出现一次，多数模板把<h1></h1>作为网站名称使用。

H2 — 副标题，在博客通常用作文章标题来使用。H3 —小标题，通常用于栏目介绍，如内容页右侧“最新文章”“最新评论及回复”等栏目。H4、H5、H6是同样道理，如H4可以用在文章的摘要部分，这三个没有前面几个常用，大家只要记得这几个标签是降序即可，即H1最重要，H2其次，以此推类。

总结，最近我也在把百度和google优化指南对比着看，我尽量满足这两份指南对模板的要求，也写下此文。以上几个是卢松松总结出更换模板的注意事项，希望对大家有用。更换模板就一句话，尽量不要变这些部分，实在要变也先从部分开始，一点点变。如果你不会懂HTML，那么请直接把老模板的Title、description和h1、h2标签部分复制替换到新模板上即可，如本文插图所示。

分类: 网页设计标签:模板日期:2010-10-14

pzg's blog

苦了一辈子，一路走好