玩转EditPlus

2009-12-23 20:55:34

EditPlus(EP)帮助手册中列出了EP的主要功能:

  • 语法高亮
  • Internet功能
  • HTML工具栏
  • 文档选择器
  • 用户工具和帮助文件
  • 自动完成
  • 素材文本窗口
  • 文档模板
  • 其他功能

其中“语法高亮”,“自动完成”和“文档模板”在EP中非常灵活,用户皆可根据自己需要进行配置。EP默认支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript 和 VBScript的语法高亮显示,基本上无需再做过多设置。而“自动完成”和“文档模板”默认支持有限,而且可能并不符合个人日常的一些编码习惯,那么则需要我们自己根据习惯进行配置,才能得心应手。

自动完成

自定义自动完成功能可分为两步:1.编写自动完成文件;2.指定关联路径。

#TITLE=CSS
;EditPlus Auto-completion file v1.0 written by wondger(http://omiga.org).
;This file is provided as a default auto-completion file for CSS.
#CASE=n
#T=reset
/*reset*/
body,h1,h2,h3,h4,h5,h6,ul,ol,p,dl,dt,dd,th,td{margin:0; padding:0;}
table{border-collapse:collapse;}
li{list-style:none;}
em{font-style:normal;}
img{border:none;}
a img{vertical-algin:top;}
/*reset*/
#T={
{^!}
#T=m
margin:^!px;
#T=ma
margin:0 auto;^!
#T=mt
margin-top:^!px;
#T=mr
margin-right:^!px;
#T=mb
margin-bottom:^!px;
#T=ml
margin-left:^!px;

以上为一段CSS自动完成文件代码。自动完成文件每个语句必须以“#”开头。

  • #TITLE – 为自动完成文件标题
  • #CASE – 指定是否区分大小写。‘y’表示是,‘n’表示否。默认值是‘n’。
  • 每个自动完成片段以“#t=title”形式的开始。title是你要你扩展的缩写词,换行后开始匹配自动完成文本,直到遇到“#”符号。如:
#T=m
margin:^!px;
  • ^! – 指定每一次自动完成后光标的停留位置。
  • ^ – 转义字符,如果需要在自动完成文本中插入“^”或“#”则需要先进行转义:“^^”,“^#”。

自动完成文件编写完成后,保存为.acp文件在任一文件目录即可。

随后打开“工具”菜单-“首选项”-“文件”-“设置和语法”,为相关文件类型设置自动完成文件,“确定”完成设置。

ep_acp

自此自动完成功能配置完成,在对应类型的文件编码中,空格触发自动完成功能。当然,你可以通过Shift 键或Window徽标键来暂时禁止此功能。

文档模板

我们日常处理的不论是HTML文档,还是CSS,JavaScript文档,都存在一定的文档规范,比如版权信息,title,keywords,description,或者一些固定的文档结构。我们显然不希望每次新建这些文档的同时,都需要重新录入这些代码,即使是“Ctrl+v”也还是有损效率。那么EP的“文档模板”则可帮助我们完成所有的工作。

自定义“文档模板”也分为两步:1.编写文档模板,2.关联模板

编写文档模板非常简单,无任何语法。比如,我需要一个HTML文档模板,那么新建一个HTML文档如下。

<!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" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>title | wondger@gmail.com/</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<meta name="author" content="wondger" />
<style type="text/css">

</style>
</head>
<body>

</body>
<script type="text/javascript">
//<![CDATA[

//]]>
</script>
</html>

根据个人需要编写模板完成后,保存为.html在任一文件目录。

随后打开“工具”菜单-“首选项”-“文件”-“模板”,在模板列表中选择相应模板关联模板文件即可。模板可以是默认模板,也可以新建模板(MY_PAGE)。

ep_tp

这样便完成“文档模板”设置,现在文件新建菜单中便可选择新建该模板文档。(其实你还可以自定义新建文档快捷键,稍后介绍)

ep_new

其他功能

自定义快捷键

EP所有操作的快捷键皆在“工具”菜单-“首选项”-“工具”-“键盘”中进行设置。我们以新建模板文档为例。

ep_hotkey

在“文件”菜单的“命令”中并不存在新建的“MY_PAGE”模板,那么如何自定义“新建MY_PAGE文档”的快捷键?其实这里存在一个对应关系,在“文件”菜单的“命令”列表中存在一个“模板1”-“模板20”的选项列表,这就对应于我们的自定义模板。

ep_md

在EP的模板列表中默认的HTML和XHTML模板无法删除,那么我们自定义的模板则按照从上到下的顺序为“模板1”、“模板2”…(其实我在想第21个自定义模板怎么办?-_-!)。这里“MY_PAGE”对应于“模板5”,在设置快捷键的时候会提示该快捷键是否已定义,如果分配已定义的快捷键,那么较早的定义会被覆盖。一个命令可以定义多个快捷键。

自动保存

EP具有定时自动保存的功能,保存间隔时间可在“工具”菜单-“首选项”-“文件”中进行设置。

保存时创建备份

EP默认会在保存时自动创建一个.bak备份文件。备份文件存放目录,后缀名皆可自定义。

HTML工具栏

ep_toolbar

EP具有强大的HTML工具栏,具有插入图像、选择颜色、插入特殊字符、表格、段落、列表、注释、表单等丰富功能。这个HTML工具同时也是可以在“工具”菜单-“首选项”-“工具”-“工具栏”自定义。

OK,以上内容为个人认为是在EP使用中较多涉及的一些功能。除此之外关于软件本身的一些设置,如字体,颜色,背景,布局等,大家就慢慢折腾吧!

XHTML 2 Working Group Expected to Stop Work End of 2009, W3C to Increase Resources on HTML 5

2009-07-03 09:38:13

2009-07-02: Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C’s position regarding the future of HTML. A FAQ answers questions about the future of deliverables of the XHTML 2 Working Group, and the status of various discussions related to HTML. Learn more about the HTML Activity. (Permalink)

HTML5

2009-06-29 13:19:04

尽管HTML5草案最终定稿要在遥远的2012,而最终的标准的正式发布可能会在更遥远的2022,但是还是可以YY一下,听说safari4已经支持HTML5了~···

HTML5主要在嵌入音频、视频、图片的函数、客户端数据存储,以及交互式文档方面增加了很多新的特性,同时也包括新的页面元素,比如 <header>, <section>, <footer>, 以及 <figure>。

同时HTML5还增加了7个标准属性,而不再支持HTML 4.01 中的accesskey属性。

  • contenteditable 设置是否允许用户编辑元素。
  • contentextmenu 给元素设置一个上下文菜单。
  • draggable 设置是否允许用户拖动元素。
  • irrelevant 设置元素是否相关。不显示非相关的元素。
  • ref 引用另一个文档或本文档上另一个位置。仅在 template 属性设置时使用。
  • registrationmark 为元素设置拍照。可规定于任何 <rule> 元素的后代元素,除了 <nest> 元素。
  • template 引用应该应用到该元素的另一个文档或本文档上另一个位置。

当然,也更新了很多事件属性。

  • onabort 发生 abort 事件时运行脚本。
  • onbeforeonload 在元素加载前运行脚本。
  • oncontextmenu 当菜单被触发时运行脚本。
  • ondrag 只要脚本在被拖动就运行脚本。
  • ondragend  在拖动操作结束时运行脚本。
  • ondragenter 当元素被拖动到一个合法的放置目标时,执行脚本。
  • ondragleave 当元素离开合法的放置目标时。
  • ondragover 只要元素正在合法的放置目标上拖动时,就执行脚本。
  • ondragstart 在拖动操作开始时执行脚本。
  • ondrop 当元素正在被拖动时执行脚本。
  • onerror 当元素加载的过程中出现错误时执行脚本。
  • onmessage 当 message 事件触发时执行脚本。
  • onmousewheel 当鼠标滚轮滚动时执行脚本。
  • onresize 当元素调整大小时运行脚本。
  • onscroll 当元素滚动条被滚动时执行脚本。
  • onunload 当文档卸载时运行脚本。

label的隐式连接

2009-03-13 10:37:39

label用来向控件定义标注(标记),如果不是用于这个用途,那完全也没有必要使用label,使用span就可以了。使用label可以与控件建立一种连接,当选择label时,即会触发此控件,即该控件会因为与之连接的label的选择而获取到焦点。

通常这一工作是通过label标签的for属性来完成的,将for属性指向一个控件的id即完成连接。

<label for="uname">姓名:</label><input id="uname" name="u_name" type="text" />

这就是label的显示连接。

而隐式连接就不再需要for属性,只需简单地将控件包含在label标签中即可。

<label>密码: <input type="password" name="psw" /></label>

label与其他控件建立连接的这两种方法,绝大部分现代浏览器都是支持的(IE6不支持隐式连接方式)。隐式方式虽简单快捷却缺乏良好的语义结构,所以还是不赞成使用;显示方式良好的结构已表现出一定的语义(结构也应该是具有语义的),所以显示方式仍然是最佳的选择。

进一步认识table

2008-05-08 16:18:28

基础的东西在这里,就不重复了~

<caption>

<catpiton>用于定义一个表格的标题,书写时候需紧随<table>标签之后。可通过样式属性:caption-side:left 设置标题在表格中所处的位置。但是目前仅非IE浏览器支持该样式属性,而IE浏览器中可通过标签的align属性完成(IE6,IE7仅支持top,bottom)。同时<caption>标签无法继承其上级table的某些样式属性(如backgroud,border等)。同时FF对caption的出来还表现出一些异常,如当对其上级<table>设置外边距时,<caption>并不会随上级<table>流动~查看演示

<colgroup>,<col>

<colgroup>用于对表格中的列进行分组。如:我们将表格中的第一列设置为红字白底。

查看演示我们可以看到不同浏览器对该标签的支持都不尽相同,safari对该标签的支持相当苛刻,需将该标签紧随<caption>/<table>书写。同时在非IE浏览器中该标签的书写位置不会影响到<thead>中单元格的显示属性,<thead>中的列亦可应用设置。而IE中只有位于<colgroup>之后的表格对象方可应用此标签设置,同时部分浏览器对通过该标签进行的样式设置无效,经测试,目前仅IE支持最好。查看演示

<col>为表格中一个或多个列定义属性值,只能在colgroup中使用此元素。如:将表格中的第一列设置为红字白底,第二,第三列设置为黑底白字。查看演示

<col>的span属性定义其影响的列数~

表格边框

表格的默认边框是很丑陋的,一个最为关键的问题是相邻单元格的重复边框,所以我们不得不动手对其进行美化。

方法一:取消默认的表格,单元格设置,将单元格间距设置为指定宽度,为表格设置背景色进而实现无重复边框。查看演示

方法二:更为简单有效的方法是通过设置border-collapes。查看演示

Page 1 of 212