标签归档:HTML

15个网页设计必备的Google Chrome 扩展

2011年第一篇,翻译自freelancefolder的一篇文章。以下为译文内容:

最近,我将Google Chrome作为了我的主力浏览器,同时,将其作为我设计和开发网页的工具,尽管我还时常会去Firefox,因为Firebug这个扩展在Chrome 上还不够完善,但我非常满意于Chrome浏览器的速度和浏览宽度等。在这篇文章中,将以字母顺序分享15个对于网页设计师和开发者非常有用的 Google Chrome扩展。

1. Aviary Screen Capture

Aviary Screen Capture扩展让你方便的截取任何网页截图,在Aviary.com申请之后,你可以方便地在浏览器内编辑你的截图,基本图像编辑器可以让你标记(通过绘制箭头和长方形)、编辑(剪裁、旋转和调整大小)并得到精确地图片像素和颜色。

其特点包括:

保存到桌面、上传到网络、或者在其他Aviary软件中编辑;

瞬间捕捉;

为截图添加文字、箭头和高亮等标记;

调整、旋转、翻转截图;

智能选择移动元素;

获取页面颜色信息;

快速启动六个Aviary工具,包括图像编辑,标记编辑器,矢量编辑器,调色板编辑器,特效编辑器和音频编辑器等。

2. Chrome SEO

Chrome SEO提供便捷的搜索引擎优化工具,这些工具帮助你进行竞争性分析、关键词研究、反向链接检查和网页排名等日常优化服务。

3. Chrome Sniffer

Chrome Sniffer可以让开发人员检查framework / CMS 和 JavaScript运行情况,这个扩展以图表方式展示检测到的结果,目前,这个扩展已经可以检测到70多种CMS和JavaScript库。

4. Eye Dropper

Eye Dropper 让你方便的获取网页或者其他地方的颜色编码。

5. Firebug Lite for Google Chrome

Firebug Lite for Google Chrome并不是一个完全替代Firebug的扩展(真不幸),不过,你还是可以通过这个扩展获取大多数功能。

6. IE Tab

IE Tab让你方便地在Chrome标签页中使用IE,对于需要进行IE浏览器下测试的开发者来说尤为适用。

7. Instant Image Editor

Instant Image Editor允许你右键点击任何一张图片或者其他元素,并按住ALT键(Linux下位ctrl键),在一个新标签页中用Pixlr进行编辑,这是一种在浏览器中快速、易用的方法。

8. Lorem Ipsum Generator

Lorem Ipsum Generator 扩展创建一个虚拟 “Lorem Ipsum” 文本。

9. MeasureIt!

MeasureIt!让你方便的测量网页中任何元素的宽度和高度。

10. Pendule

Pendule 提供浏览器开发工具,其内置的工具包括查看、重置和禁用CSS,插件JS,编辑表格,查看、编辑和获取颜色、大小等图片信息。

11. PHP Console

PHP Console是一个在Chrome浏览器中进行PHP调试和纠错的扩展。

12. Speed Tracer

Speed Tracer帮助你找出和修复web应用程序的问题,这个扩展帮助你找到应用程序的载入时间耗费问题。这些问题包括:

Javascript分析

布局

CSS样式重新计算和匹配

DOM事件处理

网络资源加载

XMLHttpRequest的回调

绘画

13. Web Developer

Web Developer为浏览器增加一个开发者工具栏, 这是流行于Firefox官方开发人员所使用的一个工具。

14. Webpage Screenshot

Webpage Screenshot 是一个快速、简便地捕捉整个网页的扩展,其特点包括:

绘图工具:线,椭圆,矩形,箭头;

为截图添加文本;

快速剪切图片大小;

分享到Facebook、Twitter、Gmail和MySpace;

直接将图片发送至打印机;

记住你最好使用的颜色;

截取整个页面。

15. Window Resizer

Window Resizer

模仿各种协议重新调整浏览器窗口,有三种屏幕类型可供选择:

台式机(标准,将整个窗口调整至指定大小);

笔记本电脑(与台式机相同,但是图标不同);

移动设备(与前两个不同,适用于指定的大小而不是整个窗口,因为移动浏览器通常没有边界)。

转自:望月的博客.

rgba

rgba: ”

微软的…

http://msdn.microsoft.com/en-us/library/ms532930%28VS.85%29.aspx

<!--[if IE]>

  <style type=\"text/css\">

  .color-block {      background:transparent;      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);      zoom: 1;   }

   </style>

<![endif]-->

HTML标签语义对照表

张小强 撰写  http://lifeever.com/site/31.html

标签名 英文全拼 中文翻译
a anchor
abbr abbreviation 缩写词
acronym acronym 取首字母的缩写词
address address 地址
b bold 粗体
big big 变大
blockquote block quotation 区块引用于
br break 换行
caption caption 标题
center center 居中
dd definition description 定义描述
del delete 删除
div division 分隔
dl definition list 定义列表
dt definition term 定义术语
em emphasized 加重
fieldset fieldset 域集
font font 字体
h1~h6 header1~header6 标题1~标题6
hr horizontal rule 水平尺
i italic 斜体
ins inserted 插入
legend legend 图标
li list item 列表项目
ol ordered list 排序列表
p paragraph 段落
pre preformatted 预定义格式
s strikethrough 删除线
small small 变小
span span 范围
strong strong 加重
sub subscripted 下表
sup superscripted 上标
u underlined 下划线
ul unordered list 不排序列表
var variable 变量

.NET下的生成.NET并分页的程序

net下的生成静态页面并分页的程序。

主要的原理就是替换模板里的特殊字符。

1、静态模板页面 template.html,主要是定义了一些特殊字符,用来被替换。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>$Title</title>
</head>
<body>
<div style="width: 417px; height: 54px" align="center">
<br />
    $Title</div>
<div style="width: 417px; height: 8px">
        浏览<font color="red"><script src="http://localhost/.Net/NewsFiles/ClickCount.aspx?NewsId=$NewsId"></script></font>次  $Time</div>
<div style="width: 417px; height: 100px">
        $Content</div>
<div style="width: 416px; height: 9px">
        $Pager</div>
<div style="width: 416px; height: 8px">
<form id="form1" action="../AddComment.aspx" style="margin:0px">
<input id="Text1" type="text" /><Img id="Image1" src="../../UserInfo/CheckCode.aspx"/><br />
<textarea  id="CommentContent" cols="20" rows="2"></textarea>
<br />
<input id="NewsId" type="hidden" value="$NewsId"/>
<input id="Button1" type="submit" value="button" />
<a href="../Display.aspx?NewsId=$NewsId">查看更多评论</a></form>
</div>
</body>
</html>

2、前态页面 NewsAdd.aspx,就是一个表单,用来填写新闻的标题和内容。

<%…@ Page Language="C#" AutoEventWireup="false" validateRequest="false" CodeFile="NewsAdd.aspx.cs" Inherits="NewsAdd.Admin_AdminPanel_NewsAdd" %>
<%…@ Register TagPrefix="FCKeditorV2" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %>
<!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 runat="server">
<title>添加新闻</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label2" runat="server" Text="标题"></asp:Label>
<asp:TextBox ID="Title" runat="server" Width="325px"></asp:TextBox><br />
<asp:Label ID="Label1" runat="server" Text="内容"></asp:Label>
<FCKeditorV2:FCKeditor id="Content" basePath="~/FCKeditor/"  runat="server" Height="400px" Width="70%"></FCKeditorV2:FCKeditor>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
<asp:Label ID="Message" runat="server" ></asp:Label></div>
</form>
</body>
</html>

3、后台页面 NewsAdd.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Mysqlserver;
using System.IO;
using System.Text;
namespace NewsAdd
…{
public partial class Admin_AdminPanel_NewsAdd : System.Web.UI.Page
…{
protected void Page_Load(object sender, EventArgs e)
…{

        }
protected void Button1_Click(object sender, EventArgs e)
…{
string strDate = DateTime.Now.ToString("yyMMdd") + "" + DateTime.Now.ToString("yyyymmddhhmmss");
string strFileName = strDate + ".shtml";//存储到数据库中
string strTitle=Request.Form["Title"].ToString().Trim();//接收传过来的标题
string strContent=Request.Form["Content"].ToString().Trim();//接收传过来的内容
string[] content = strContent.Split(new Char[] …{’|’});//对内容进行拆分,并保存到数组
int upbound = content.Length;//数组的上限
            SqlServerDataBase db = new SqlServerDataBase();
bool success = db.Insert("insert into inNews(Title,Content,FilePath)values(‘" + strTitle + "’,’" + strContent + "’,’" + strFileName + "’)", null);
//if (success)
// Message.Text = "添加成功!";
–*////////////////////////////创建当前日期的文件夹开始
string dir = Server.MapPath("../../"+"NewsFiles/"+DateTime.Now.ToString("yyMMdd"));//用来生成文件夹
if (!Directory.Exists(dir))
…{
                Directory.CreateDirectory(dir);
            }
–*////////////////////////////创建当前日期的文件夹结束
try
…{
for (int i = 0; i < content.Length; i++)
…{
//string[] newContent = new string[4];//定义和html标记数目一致的数组
            StringBuilder strhtml = new StringBuilder();

//创建StreamReader对象
using (StreamReader sr = new StreamReader(Server.MapPath("../../" + "NewsFiles/") + "template.html",Encoding.GetEncoding("gb2312")))
…{
                    String oneline;
//读取指定的HTML文件模板
while ((oneline = sr.ReadLine()) != null)
…{
                        strhtml.Append(oneline);
                    }
                    sr.Close();
                }

//为标记数组赋值
//SqlServerDataBase db = new SqlServerDataBase();
            DataSet ds = db.Select("select top 1 NewsId from inNews order by NewsId desc", null);//获取id
string strTable = "<table><tr><td>$upUrl</td><td>$Number</td><td>$downUrl</td></tr></table>";//上下页表格,注意此处的$upUrl(上一页),$Number(页码分页),$downUrl(下一页)
//这三个是用来替换的。

string FilePath="";
                strhtml = strhtml.Replace("$Title", strTitle);
                strhtml = strhtml.Replace("$NewsId", ds.Tables[0].Rows[0]["NewsId"].ToString());
                strhtml = strhtml.Replace("$Time", DateTime.Now.ToString("yyyy/MM/dd"));
                strhtml = strhtml.Replace("$Content", content[i]);
string strNumber = "";//数字分页1,2,3……
for (int m = 1; m <=upbound; m++)
…{
if (m == 1)//如果是第一页就显示成这个样子:20070524.shtml而不是20070524_1.shtml
                        strNumber = strNumber + " ["+"<a href=" + "../" + strDate + ".shtml" + ">" + m + "</a>"+"] ";
else
…{
int n = m – 1;//第三页的连接应该是20070524_2.shtml,以此类推
                        strNumber = strNumber + " [" +"<a href=" + "../" + strDate + "_" + n + ".shtml" + ">" +  m + "</a>"+"] ";
                    }
                }
if (upbound == 0)//如果没有分页,就直接按日期时间保存
…{
                        FilePath = Server.MapPath("../../") + "NewsFiles" + "//" + strDate + ".shtml";
                        strhtml = strhtml.Replace("$Pager", "");
                    }
else//否则按20070524.shtml、20070524_1.shtml 这种效果保存
…{
if (i == 0)
                            FilePath = Server.MapPath("../../") + "NewsFiles" + "//" + strDate + ".shtml";
else
                            FilePath = Server.MapPath("../../") + "NewsFiles" + "//" + strDate + "_" + i + ".shtml";

if (i == 0)//第一页不显示上一页
                            strTable = strTable.Replace("$upUrl", ""); 

if (i <= 1)//上一页分页
                            strTable = strTable.Replace("$upUrl", "<a href=" + "../" + strDate + ".shtml" + ">上一页</a>");
else
…{
int p = i – 1;
                            strTable = strTable.Replace("$upUrl", "<a href=" + "../" + strDate + "_" + p + ".shtml" + ">上一页</a>");
                        }

if(upbound==1)//如果只有一页,则不显示页码
//strNumber="";
                        strTable = strTable.Replace("$Number", "");
else
                        strTable = strTable.Replace("$Number", strNumber);//页码替换
–*/////////////////////////
if(i==upbound-1)//最后一页不显示下一页
                            strTable = strTable.Replace("$downUrl", "");

if (i != upbound – 1)//下一页分页
…{
int q = i + 1;
                            strTable = strTable.Replace("$downUrl", "<a href=" + "../" + strDate + "_" + q + ".shtml" + ">下一页</a>");
                        }
else
…{
int j = upbound – 1;
                            strTable = strTable.Replace("$downUrl", "<a href=&qu
ot; + "../" + strDate + "_" + j + ".shtml" + ">下一页</a>");
                        }

                        strhtml = strhtml.Replace("$Pager", strTable);
                    }
//创建文件信息对象——————————————–
                FileInfo finfo = new FileInfo(FilePath);
//以打开或者写入的形式创建文件流
using (FileStream fs = finfo.OpenWrite())
…{
//根据上面创建的文件流创建写数据流
                    StreamWriter sw = new StreamWriter(fs, System.Text.Encoding.Default);
//把新的内容写到创建的HTML页面中
                    sw.WriteLine(strhtml);
                    sw.Flush();
                    sw.Close();
                }
            }
        }
catch (Exception err)
…{
//输出异常信息
            Response.Write(err.ToString());
        }
        }
}
}

请不要直接拷贝使用,里面的路径需要更改,但程序绝对没问题,在我本地已经测试通过。

另外在使用时,比如我要把新闻的内容分成4页,就应该这样写:111|222|333|444。

HTML中Codepage的定义和历史

字符内码(charcter code)指的是用来代表字符的内码.读者在输入和存储文档时都要使用内码,内码分为

单字节内码 — Single-Byte character sets (SBCS),可以支持256个字符编码.
双字节内码 — Double-Byte character sets)(DBCS),可以支持65000个字符编码.主要用来对大字符集的东方文字进行编码.
codepage 指的是一个经过挑选的以特定顺序排列的字符内码列表,对于早期的单字节内码的语种,codepage中的内码顺序使得系统可以按照此列表来根据键盘的输入值给出一个对应的内码.对于双字节内码,则给出的是MultiByte到Unicode的对应表,这样就可以把以Unicode形式存放的字符转化为相应的字符内码,或者反之,在Linux核心中对应的函数就是utf8_mbtowc和utf8_wctomb.
在1980年前,仍然没有任何国际标准如ISO-8859或Unicode来定义如何扩展US-ASCII编码以便非英语国家的用户使用.很多IT厂商发明了他们自己的编码,并且使用了难以记忆的数目来标识:

例如936代表简体中文. 950代表繁体中文.

1.1 CJK Codepage
同 Extended Unix Coding ( EUC )编码大不一样的是,下面所有的远东 codepage 都利用了C1控制码 { =80..=9F } 做为首字节, 使用ASCII值 { =40..=7E { 做为第二字节,这样才能包含多达数万个双字节字符,这表明在这种编码之中小于3F的ASCII值不一定代表ASCII字符.

CP932

Shift-JIS包含日本语 charset JIS X 0201 (每个字符一个字节) 和 JIS X 0208 (每个字符两个字节),所以 JIS X 0201平假名包含一个字节半宽的字符,其剩馀的60个字节被用做7076个汉字以及648个其他全宽字符的首字节.同EUC-JP编码区别的是,Shift-JIS没有包含JIS X 202中定义的5802个汉字.

CP936

GBK 扩展了 EUC-CN 编码( GB 2312-80编码,包含 6763 个汉字)到Unicode (GB13000.1-93)中定义的20902个汉字,中国大陆使用的是简体中文zh_CN.

CP949

UnifiedHangul (UHC) 是韩文 EUC-KR 编码(KS C 5601-1992 编码,包括2350 韩文音节和 4888 个汉字a)的超集,包含 8822个附加的韩文音节( 在C1中 )

CP950

是代替EUC-TW (CNS 11643-1992)的 Big5 编码(13072 繁体 zh_TW 中文字) 繁体中文,这些定义都在Ken Lunde的 CJK.INF中或者 Unicode 编码表中找到.

注意: Microsoft采用以上四种Codepage,因此要访问Microsoft的文件系统时必需采用上面的Codepage .

1.2 IBM的远东语言Codepage
IBM的Codepage分为SBCS和DBCS两种:

IBM SBCS Codepage

37 (英文) *
290 (日文) *
833 (韩文) *
836 (简体中文) *
891 (韩文)
897 (日文)
903 (简体中文)
904 (繁体中文)
IBM DBCS Codepage

300 (日文) *
301 (日文)
834 (韩文) *
835 (繁体中文) *
837 (简体中文) *
926 (韩文)
927 (繁体中文)
928 (简体中文)
将SBCS的Codepage和DBCS的Codepage混合起来就成为: IBM MBCS Codepage

930 (日文) (Codepage 300 加 290) *
932 (日文) (Codepage 301 加 897)
933 (韩文) (Codepage 834 加 833) *
934 (韩文) (Codepage 926 加 891)
938 (繁体中文) (Codepage 927 加 904)
936 (简体中文) (Codepage 928 加 903)
5031 (简体中文) (Codepage 837 加 836) *
5033 (繁体中文) (Codepage 835 加 37) *
*代表采用EBCDIC编码格式