网页设计 - pzg’s blog

正在浏览网页设计里的文章

IIS 6.0 中配置 HTTP Gzip 压缩

2010-03-12 抢沙发

一. HTTP压缩概述

HTTP压缩是在Web服务器和浏览器间传输压缩文本内容的方法。HTTP压缩采用通用的压缩算法如gzip等压缩HTML、JavaScript或 CSS文件。压缩的最大好处就是降低了网络传输的数据量，从而提高客户端浏览器的访问速度。当然，同时也会增加一点点服务器的负担。Gzip是比较常见的一种HTTP压缩算法。

本文介绍的HTTP压缩方式，采用的是Windows系统设置的方式，优点是效率较高。

二. HTTP压缩工作原理

Web服务器处理HTTP压缩的工作原理如下：

Web服务器接收到浏览器的HTTP请求后，检查浏览器是否支持HTTP压缩；

如果浏览器支持HTTP压缩，Web服务器检查请求文件的后缀名；

如果请求文件是HTML、CSS等静态文件，Web服务器到压缩缓冲目录中检查是否已经存在请求文件的最新压缩文件；

如果请求文件的压缩文件不存在，Web服务器向浏览器返回未压缩的请求文件，并在压缩缓冲目录中存放请求文件的压缩文件；

如果请求文件的最新压缩文件已经存在，则直接返回请求文件的压缩文件；

如果请求文件是ASPX等动态文件，Web服务器动态压缩内容并返回浏览器，压缩内容不存放到压缩缓存目录中。

三. IIS 6.0中配置HTTP Gzip压缩的步骤:

1) 打开Internet信息服务(IIS)管理器，右击”网站”->”属性”，选择”服务”。在”HTTP压缩”框中选中”压缩应用程序文件”和”压缩静态文件”，按需要设置”临时目录”和”临时目录的最大限制”；

2) 在Internet信息服务(IIS)管理器，右击”Web服务扩展”->”增加一个新的Web服务扩展…”，在”新建Web服务扩展”框中输入扩展名”HTTPCompression”，添加”要求的文件”为C:\WINDOWS\system32\inetsrv\gzip.dll，其中 Windows系统目录根据您的安装可能有所不同，选中”设置扩展状态为允许”；

3) 使用文本编辑器打开C:\Windows\System32\inetsrv\MetaBase.xml(建议先备份),找到Location =”/LM/W3SVC/Filters/Compression/gzip”，如果需要压缩动态文件，则将 HcDoDynamicCompression设置为”TRUE”，并在HcScriptFileExtensions中增加您要压缩的动态文件后缀名，如aspx；如果需要压缩静态文件，则将HcDoStaticCompression和HcDoOnDemandCompression设置为 “TRUE”，并在HcFileExtensions中增加您需要压缩的静态文件后缀名，如xml、css等； HcDynamicCompressionLevel和HcOnDemandCompLevel表示需要的压缩率，数字越小压缩率越低；

4) 编辑完毕后保存MetaBase.xml文件；如果文件无法保存，则可能IIS正在使用该文件。打开”开始”->”管理工具”->”服务”，停止”IIS Admin Service”后，即可保存；

5) 最后，重新启动IIS。可以到HTTP压缩测试网站验证结果。

网页设计 Gzip, IIS

几大搜索引擎网页使用标准

2010-03-08 已有 2 条评论

网页的标准在不断的被炒热，HTML5的出台不仅让WEB语言有了新的标准还让FLASH和silverlight受到了不小的惊吓。最近也用HTML5写了一些网站，其实并没有像那些个做HTML5网站的人，上来就说IE系列的浏览器是用不了的。只是其中一些元素IE是不支持呢，大部分标签还是兼容的。

对于其他网站的使用情况我也发现有一部分开始使用<!doctype html>作为声明了，那么就是说，开始符合HTML5标准了，我这里只提供搜索引擎的使用情况，我找到两家搜索引擎在使用<!doctype html>，其中是有道和百度。从使用情况上看有道更好一些，百度只有首页在使用，其他页面是没有的。

有道 <!doctype html>
百度 <!doctype html>
yahoo.cn XHTML 1.0 Transitional
搜搜 XHTML 1.0 Transitional
必应 XHTML 1.0 Transitional
搜狗没有声明
google 没有声明

网页设计 baidu, google, 搜索引擎

utf8_unicode_ci与utf8_general_ci的区别

2010-02-27 已有 2 条评论

当前，utf8_unicode_ci校对规则仅部分支持Unicode校对规则算法。一些字符还是不能支持。并且，不能完全支持组合的记号。这主要影响越南和俄罗斯的一些少数民族语言，如：Udmurt 、Tatar、Bashkir和Mari。

utf8_unicode_ci的最主要的特色是支持扩展，即当把一个字母看作与其它字母组合相等时。例如，在德语和一些其它语言中‘ß’等于‘ss’。

utf8_general_ci是一个遗留的校对规则，不支持扩展。它仅能够在字符之间进行逐个比较。这意味着utf8_general_ci校对规则进行的比较速度很快，但是与使用utf8_unicode_ci的校对规则相比，比较正确性较差）。

例如，使用utf8_general_ci和utf8_unicode_ci两种校对规则下面的比较相等：

Ä = A

Ö = O

Ü = U

两种校对规则之间的区别是，对于utf8_general_ci下面的等式成立：

ß = s

但是，对于utf8_unicode_ci下面等式成立：

ß = ss

对于一种语言仅当使用utf8_unicode_ci排序做的不好时，才执行与具体语言相关的utf8字符集校对规则。例如，对于德语和法语，utf8_unicode_ci工作的很好，因此不再需要为这两种语言创建特殊的utf8校对规则。

utf8_general_ci也适用与德语和法语，除了‘ß’等于‘s’，而不是‘ss’之外。如果你的应用能够接受这些，那么应该使用utf8_general_ci，因为它速度快。否则，使用utf8_unicode_ci，因为它比较准确。

网页设计 mysql, utf8, 编码

html5标签参考手册

2010-02-23 抢沙发

之前我已经发过一份w3c标准html5手册,不过因为强的墙的原因，已经无法打开我用的网盘了，这里在发一份文本的吧，我看了下html5的标签多了一些标签，删除了一些在XHTML里面已经不用的标签，不在支持嵌入网页了。不过最近网上抄的火热我也来凑凑热闹，在发一份HTML5的参考手册。继续阅读

网页设计 HTML

HTML 5 !DOCTYPE

2010-02-10 已有 2 条评论

定义和用法
<!DOCTYPE> 声明是文档中的第一个成分，位于 <html> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中有 3 个不同的文档类型，在 HTML 5 中只有一个：<!DOCTYPE HTML>。
提示和注释：
注释：<!DOCTYPE> 标签没有结束标签！

提示：<!DOCTYPE> 对大小写不敏感。
HTML 5
在 HTML5 中，文档类型声明很简单：

<!DOCTYPE HTML>

在所有 HTML 文档中规定文档类型很重要，这样浏览器才能了解所预期的文档类型。

HTML 4.01 中的 doctype 需要引用一个 DTD，这是因为 HTML 4.01 基于 SGML。HTML 5 不基于 SGML，也不需要引用 DTD，但是需要声明文档类型让浏览器按照它们应该的方式来运行。
属性：NONE

网页设计 HTML

学习和使用web标准的十大理由

2010-02-09 已有 3 条评论

如果你是一个新接触web标准这个概念并且还犹豫是否应该花时间去学习它的web开发者或者设计者，这里有一些让你去学习它的重要理由。对于已经使用web标准的web专业人士，当你需要很好的论据的时候这份清单可能可以派上用场，并且随意添加任何你所想到的好处。

1. 让自己看起来更专业

其他web开发者和潜在的雇主将可以看看你的工作，知道你一个喜欢跟上技术的变化的人，并确保你的知识和技能的总是最新的。它将使你像一个真正的web专业人士。

2. 让你的客户看好

使用web标准和可访问性相结合的最佳做法，让你的客户有机会谈论他们如何满足所有的人，以及他们如何发现重要的是，每个人都可以使用他们的服务或了解他们产品的信息。你也避免由于将残疾人，Mac用户和移动手机用户等访问者拒之门外所带来的负面影响。

3. 最大限度的潜在客户人数

你不知道访问者将使用什么设备来访问你的网站。你可能认为你知道，但除非你为一个规定使用某种浏览器的公司搭建一个内联网。

你唯一可以相当肯定的是，他们使用的是一个可以解析的HTML的东西。通过使用Web标准你可以相当肯定，你所做的使你的网站在尽可能多的浏览设备上工作。

你不知道访问者将使用什么设备来访问你的网站。你可能认为你知道，但除非你为一个规定使用某种浏览器的公司搭建一个内联网。你唯一可以相当肯定的是，他们使用的是一个可以解析的HTML的东西。通过使用Web标准你可以相当肯定，你所做的使你的网站在尽可能多的浏览设备上工作。

4. 更快的加载和减少带宽的使用

结构良好的标记从表现中分隔的结构和内容，一般比使用表格和间隔图片的标记更加紧凑。文件更小并且使用户下载更快。无论怎样，仍然有很多，通过拨号连接到互联网上的人。

如果您的网站托管计划在免费带宽使用上受限制，较小的文件，将降低成本—提供的流量不会增加。

5. 为可访问性提供基础

使用Web标准并不能保证您网站的所有方面会使得残疾人士可访问，但它是一个很好的开始。确保您的文件是有效的，结构合理和语义化，那你就是在通往拥有一个可访问的网站的路上。

6. 提高搜索引擎排名

通过提供干净，结构良好，和语义化标记的写得很好的内容是搜索引擎蜘蛛的美味食物，并会帮助你提升排名。当然，这将会增加的流量，这正是大多数网站拥有者所希望的。

7. 让你的标记易于维护

当你需要更新你的网站的时候，你会喜欢费力的使用许多以数千字节倍增的表格和嵌套间隔图片还是只是使用干净的及结构良好的浏览文件？

删除，插入或修改无表现内容比不得不保证你的所有不整齐的部分正确表现要更容易，更有效。使用CSS来控制布局使整个网站的设计变更容易。

8. 面向未来的内容

目前任何人都不可能100％的把握保证，今天这些以电子形式创建和储存的文件在百年后仍可读。甚至五十年。但是如果你从表现中分离内容，并使用当前的Web标准，尽你所能做到最好以确保即使你不在的时候你的内容仍然可读。

9. 良好的商业意识

为什么还会有企业主说，没有更多的访问者？一个更快的网站？改进的搜索引擎排名？潜在很好的宣传？这是没有道理这样做。

10. 这是处事的最好方法

Web标准方法是我们应该从一开始建立网站就采用的方式。现在我们为何不以正确的方式做一些事，并有一个真正极好的理由对自己感觉良好。

网页设计 w3c, 网页设计

如何书写可维护的CSS代码

2010-02-09 抢沙发

一、在样式表开头添加一个注释块，用以描述这个样式表的创建日期、创建者、标记等备注信息。

Example Source Code：
/*
———————————
Site: Site name
Author: 52CSS.com
Updated: Date and time
Updated by: Name
———————————
*/

二、包括公用颜色标记

Example Source Code：
/*
———————————
COLORS
Body background: #def455
Container background: #fff
Main Text: #333
Links: #00600f
Visited links: #098761
Hover links: #aaf433
H1, H2, H3: #960
H4, H5, H6: #000
———————————
*/

三、给ID和Class进行有意义的命名

不推荐的命名方式：

Example Source Code：
.green-box { … }
#big-text { … }

推荐使用的命名方式：

Example Source Code：
.pullquote {… }
#introduction {… }

四、将关联的样式规则进行整合

Example Source Code：
#header { … }
#header h1 { … }
#header h1 img { … }
#header form { … }
#header a#skip { … }
#navigation { … }
#navigation ul { … }
#navigation ul li { … }
#navigation ul li a { … }
#navigation ul li a:hover { … }
#content { … }
#content h2 { … }
#content p { … }
#content ul { … }
#content ul li { … }

五、给样式添加清晰的注释

Example Source Code：
/*
———————————
header styles
———————————
*/
#header { … }
#header h1 { … }
#header h1 img { … }
#header form { … }
/*
———————————
navigation styles
———————————
*/
#navigation { … }

网页设计 css

WEB标准最佳实践：五个需要注意的地方

2010-02-09 已有 2 条评论

WEB标准的CSS网页布局，需要注意的地方有很多。我们已经作过很多介绍，今天介绍五个需要注意的地方。

一、永远使用小写字母

Example Source Code：
不好的做法：

<DIV>
<P>Here’s an interesting fact about corn. </P>
</DIV>

好的做法：

<div>
<p>Here’s an interesting fact about corn. </p>
</div>

二、让引号伴随着属性

Example Source Code：
不好的做法：
class=bookchinazcom

正确的做法：
class=”bookchinazcom”

三、有必要的代码注释

“使得你的代码在长时间内依然能够保持容易理解和维护”。

作为开发人员，有必要给代码进行注释。

有注释的代码，它能帮助我们阅读，保持清晰的思维和思路。

日后也方便快速修改和调试。不仅方便了自己，也方便了别人。

四、切勿使用直线

或许大家有疑问，为什么不提倡使用直线呢，这是一个很有用的标签。

但大家不要忘记，Web标准一直强调的是表现与内容的分离。

直线是表现的一部分，将它写放于HTML文档中，显然是不合适的。因而切勿使用直线。

五、切勿使用内嵌样式

样式表文件分离到外部样式表文件中，与HTML文档分开。使用内嵌样式就失去了CSS网页布局的意义。但内嵌样式可以在调试是使用，在最终发布网站时，需要去除所有的内嵌样式。

网页设计 w3c, 网页设计

DedeEIMS

2010-02-08 抢沙发

Dede Enterprise Information Management System (简称DedeEIMS)是织梦科技为中小型企业专门开发的一套建站系统，产品继承了织梦内容管理系统简单、易用的特点，并且加入了如：多国语言、在线客服、招聘、产品订单等功能。
程序的内容创建获取及管理、安全灵活的程序架构，简单易懂的模板标签机制，方便快捷的频道管理以及无限极拓展分类的需求，标准静态化更适合搜索引擎优化（SEO），让你能够轻松打造出专业的企业网站，帮你在互联网拓展公司业务，提升企业的核心竞争力。

这款程序是不错的，不过眼看着是太监了，dede的seo在业内一直是饱受赞誉的，同样这款企业版的dedecms的阉割版也一样有着不错的SEO，在这里留下这个程序的下载，是为了等以后真的太监了，也留个种，好的企业程序不多，大多是共享类的程序，功能不全甚至是程序加密。继续阅读

网页设计 dede, DedeEIMS

中文 WordPress 工具箱

2010-02-06 已有 8 条评论

我一直坚持用的一款插件，由于不想有太多人和我使用一样的主题，所以一直在使用国外的主题，英文主题对中文的支持一直不是很好，这款插件很不错的解决这个问题，这次在拿出来介绍一下，也用来我以后换主题调用参数使用
用来解决官方 WordPress 没有照顾到的中文相关问题。使用这个插件，你可以显示随机文章，最新留言，留言最多文章，发表评论最多的网友，以及真正的文章摘要（如果你的模板里使用的是the_excerpt()来调用内容的话）等等，真正截断，没有乱码。

这个插件由 WordPress 随机文章和 WordPress 评论插件合并增强而来。在激活这个插件之前，请务必先停用这两个插件，不然的话会有冲突。
安装：

解压缩，把 mulberrykit.php 上传至 /wp-content/plugins/
在管理界面里激活中文 WordPress 工具箱插件（如果你在使用 WordPress 随机文章和 WordPress 评论插件，务必先停用这两个插件。）

使用说明：
1、最新回响

<?php get_recent_comments(); ?>

调用方式：get_recent_comments($no_comments = 5, $before = ‘<li> ‘, $after = ‘</li>’, $show_pass_post = false)

$no_comments：显示回响数，缺省为5条；
$before：每条记录前显示的文字，缺省<li>
$after：每条记录后显示的文字，缺省</li>
$show_pass_post：是(true)/否(false)显示保护了的文章，缺省否(false)

补充：
kdolphin 在回应里提出，希望在最新回响里不显示自己的回应。这很容易做到。在get_recentcomments() 这个函数里找到这一句

post_status = ‘publish’

在后面加上

AND comment_author != ‘桑葚’

就可以了。（把上面的桑葚改成你自己的昵称；引号是半角的）

注意：最好在wp的插件编辑窗口下改，以免乱码的问题。

根据网友的建议加上了两个相关的函数：
仅显示留言，不包括引用 <?php get_recent_comments_only (); ?>
仅显示引用（包括trackback和pingback）<?php get_recent_trackbacks(); ?>

调用方式与<?php get_recent_comments(); ?>相同。

2、最新文章

根据网友们的反馈，我把这个最新文章的函数又放回来了。

<?php get_recent_posts(); ?>

调用方式：get_recent_posts($no_posts = 5, $before = ‘<li>+ ‘, $after = ‘</li>’, $show_pass_post = false, $skip_posts = 0)

$no_posts：显示文章数，缺省为5条；
$before：每条记录前显示的文字，缺省<li>
$after：每条记录后显示的文字，缺省</li>
$show_pass_post：是(true)/否(false)显示保护了的文章，缺省否(false)
$skip_posts：跳过多少篇文章，缺省为0；

3、评论最多的帖子

<?php get_mostcommented(); ?>

调用方式：get_mostcommented($limit = 5)

4、发表评论最多的网友

<?php get_commentmembersstats(); ?>
把代码里面的blogmaster改成你自己的名字，可以滤掉你自己的名字。

调用方式：get_commentmembersstats($threshhold = 5)

5、随机文章

由这个插件修改而来：

a、改了提取excerpt摘要的方式，可适用于中文；
b、摘要可显示于文章链接的title里，或者直接在页面上，可选；
c、在文章链接的title里显示日期。

在模板里调用 <?php random_posts(); ?>

调用方式: random_posts ($limit = 5, $length = 400, $before = ‘<li>’, $after = ‘</li>’, $show_pass_post = false, $show_excerpt_in_title = true)

$limit：显示文章数，缺省5篇；
$length：摘要长度，缺省400；
$before：每条记录前显示的文字，缺省<li>
$after：每条记录后显示的文字，缺省</li>
$show_pass_post：是(true)/否(false)显示保护了的文章，缺省否(false)
$show_excerpt_in_title：是(true)，摘要显示于文章链接的title；否(false)，直接显示于页面；缺省是(true)

6、显示摘要

某些情况下需要输出摘要，比如搜索结果、档案，还有 rss 输出，这样可以节省流量资源。但是，如果你的文章是中文的话，官方 WordPress 输出的其实并不是摘要，它只是把文章里的 html 代码过滤掉了，但所有文字都还是原样输出了。

激活这个插件后，输出的就是真正截断的摘要了。

网页设计 wordpress

更老的文章

一	二	三	四	五	六	日
« 二
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

pzg’s blog

正在浏览网页设计里的文章

IIS 6.0 中配置 HTTP Gzip 压缩

几大搜索引擎网页使用标准

utf8_unicode_ci与utf8_general_ci的区别

html5标签参考手册

HTML 5 !DOCTYPE

学习和使用web标准的十大理由

如何书写可维护的CSS代码

WEB标准最佳实践：五个需要注意的地方

DedeEIMS

中文 WordPress 工具箱

随机文章

最新回复

标签

文章索引模板

功能

分类目录

友情链接

正在浏览 网页设计 里的文章

随机文章

最新回复

标签

文章索引模板

功能

分类目录

友情链接

正在浏览网页设计里的文章