存档: ‘网页设计’ 分类

vim常用命令

没有评论 2011年9月25日

一、由一般模式转到输入模式的命令
1〉光标移动命令
0 移动到光标所在列的最前面[Home]
$ 移动到光标所在列的最後面[End]
[CTRL][d] 向下半页
[CTRL][f] 向下一页[PageDown]
[CTRL][u] 向上半页
[CTRL][b] 向上一页[PageUp]
H移动到视窗的第一列
M移动到视窗的中间列
L移动到视窗的最后列
G移动到文件最后列
nG直接用数字 n 加上大写 G 移动到第 n 行 (等同于命令“:n”)
fx往右移动到 x 字符上
tx往右移动到 x 字符前
shift +g 跳到文件尾 (等同于G)
gg 跳到文件头
xp 交换两个字符位置
ddp 上下两行调换
[ 移到文件开始位置
] 移到文件结束位置
nk向上移n行
n↑向上移n行
n-向上移n行,光标在该行的起始
ni 向下移n行
n+向下移n行,光标在该行的起始
n↓向下移动n行
w 向前移动一个word
nw 向前移动n个word
→ 向右移动一个字符【l】
← 向左移动一个字符【h】
↑ 向上移动一行【k】
↓ 向下移动一行【j】

2〉删除操作命令
x 删除光标所在的字符【delete】
dw 删除光标所在的单词
d $ 删除光标至行尾的所有字符
/d d 同/d d $
dd 删除当前行
dnd 删除当前n行
dG 删除当前行到最后一行
可在删除命令前加上数字,如<5x表示删除5行。

3〉改变与替换操作命令
r 替换光标所在的字符
/rr 替换字符序列
c $ 替换自光标位置至行尾的所有字符
cl 修改当前字符
cc 修改当前行
c$ 修改到行尾的内容
:%s#abc#123#g 将文中的所有abc都替换为123
ddp 上下两行交换(其实是先dd,然后执行p)

4〉查询命令
/string 往前搜索string【支持正则】
n 查找下一个
?string 往后搜索string
/+上下箭头 搜索历史
:+上下箭头 :命令的历史
* 往前查找当前word,前提是光标移动到要查找的word
# 往后查找当前word,前提是光标移动到要查找的word
/\<word\> 只匹配word,不匹配wordstr等等
% 查找匹配的括号,前提是光标要在一边的括号上
fx 在当前行移动到下一个字符x

5〉拷贝与粘贴命令
yw 将光标所在单词拷入剪贴板
y$ 将光标至行尾的字符拷入剪贴板
Y 同
yy 将当前行拷入剪贴板
yny 将当前n行拷入剪贴板
p 将剪贴板中的内容粘贴在光标后
P 将剪贴板中的内容粘贴在光标前

6〉文件编辑、保存及退出vi命令
:q 不保存退出
:q! 不保存强制性退出
:w 保存编辑
:w filename 存入文件filename中
:w! filename 强制性存入文件filename中
:wq / :x / ZZ 保存退出
:wq! 强制保存然后退出

7〉其他命令
:args 显示当前文件名
u 撤销,相当于Ctrl+z
U 一次撤销一行的所有操作
Ctrl+R 重做
:help 查看所有帮助
:help 0 查看关于0的帮助
ZZ 退出帮助,回到编辑模式
Ctrl+G 知道【文件名 是否修改 当前第一行 前面所占行的百分比】
Ctrl+v 选择一个块
:set number 显示行号
:set nonumber 不显示行号
:set rule 显示光标位置
:set ignorecase 搜索不区分大小写
:set noignorecase 搜索区分大小写
:ab string string 提示(比如:ab abc abcdefg,当输入abc然后输入空格,abc自动变为abcdefg)
:new filename 打开或新建文件,如果不指定文件名或者文件名不存在则是新建文件。
:set ruler 打开光标的行列位置显示功能
:set shiftwidth=4 设置自动缩进格数
:set autoindent 打开自动缩进功能
:set paste 粘贴的时候关闭自动缩进
:set nopaste 粘贴的时候打开自动缩进

三、进入vi的命令
vi filename: 打开或新建文件,并将光标置于第一行首
vi +n filename: 打开文件,并将光标置于第n行首
vi + filename: 打开文件,并将光标置于最后一行首
vi +/pattern filename: 打开文件,并将光标置于第一个与pattern匹配的串处
vi -r filename: 在上次正用vi编辑时发生系统崩溃,恢复filename
vi filename.filename: 打开多个文件,依次进行编辑
vi + /word filename:进入vi并且由文件的word这个字开始

注意:Ctrl+S在Linux下是停止显示终端的输出,这个时候屏幕就像定住了一样,终端不会继续输出,也不会响应你的输入,需要按一下 Ctrl-Q 即可恢复输入。

vi/vim 查找替换大全

没有评论 2011年9月24日

vi/vim 中可以使用 :s 命令来替换字符串。以前只会使用一种格式来全文替换,今天发现该命令有很多种写法,记录几种在此,方便以后查询。

:s/vivian/sky/ 替换当前行第一个 vivian 为 sky

:s/vivian/sky/g 替换当前行所有 vivian 为 sky

:n,$s/vivian/sky/ 替换第 n 行开始到最后一行中每一行的第一个 vivian 为 sky

:n,$s/vivian/sky/g 替换第 n 行开始到最后一行中每一行所有 vivian 为 sky

:n,$s/vivian/sky/gc 替换第 n 行开始到最后一行中每一行所有 vivian 为 sky时都提示是否替换

n 为数字,若 n 为 .,表示从当前行开始到最后一行

:%s/vivian/sky/(等同于 :g/vivian/s//sky/) 替换每一行的第一个 vivian 为 sky

:%s/vivian/sky/g(等同于 :g/vivian/s//sky/g) 替换每一行中所有 vivian 为 sky

可以使用 # 作为分隔符,此时中间出现的 / 不会作为分隔符

:s#vivian/#sky/# 替换当前行第一个 vivian/ 为 sky/

:%s+/oradata/apras/+/user01/apras1+ (使用+ 来 替换 / ): /oradata/apras/替换成/user01/apras1/

1.:s/vivian/sky/ 替换当前行第一个 vivian 为 sky

:s/vivian/sky/g 替换当前行所有 vivian 为 sky

2. :n,$s/vivian/sky/ 替换第 n 行开始到最后一行中每一行的第一个 vivian 为 sky

:n,$s/vivian/sky/g 替换第 n 行开始到最后一行中每一行所有 vivian 为 sky

(n 为数字,若 n 为 .,表示从当前行开始到最后一行)

3. :%s/vivian/sky/(等同于 :g/vivian/s//sky/) 替换每一行的第一个 vivian 为 sky

:%s/vivian/sky/g(等同于 :g/vivian/s//sky/g) 替换每一行中所有 vivian 为 sky

4. 可以使用 # 作为分隔符,此时中间出现的 / 不会作为分隔符

:s#vivian/#sky/# 替换当前行第一个 vivian/ 为 sky/

5. 删除文本中的^M

问题描述:对于换行,window下用回车换行(0A0D)来表示,Linux下是回车(0A)来表示。这样,将window上的文件拷到Unix上用时,总会有个^M.请写个用在unix下的过滤windows文件的换行符(0D)的shell或c程序。

· 使用命令:cat filename1 | tr -d “^V^M” > newfile;

· 使用命令:sed -e “s/^V^M//” filename > outputfilename。需要注意的是在1、2两种方法中,^V和^M指的是Ctrl+V和Ctrl+M。你必须要手工进行输入,而不是粘贴。

· 在vi中处理:首先使用vi打开文件,然后按ESC键,接着输入命令:%s/^V^M//。

· :%s/^M$//g

如果上述方法无用,则正确的解决办法是:

· tr -d “\r” < src >dest

· tr -d “\015″ dest

· strings A>B

6. 其它

利用 :s 命令可以实现字符串的替换。具体的用法包括:

:s/str1/str2/ 用字符串 str2 替换行中首次出现的字符串 str1

:s/str1/str2/g 用字符串 str2 替换行中所有出现的字符串 str1

:.,$ s/str1/str2/g 用字符串 str2 替换正文当前行到末尾所有出现的字符串 str1

:1,$ s/str1/str2/g 用字符串 str2 替换正文中所有出现的字符串 str1

:g/str1/s//str2/g 功能同上

从上述替换命令可以看到:g 放在命令末尾,表示对搜索字符串的每次出现进行替换;不加 g,表示只对搜索

字符串的首次出现进行替换;g 放在命令开头,表示对正文中所有包含搜索字符串的行进行替换操作。

利用美图秀秀给图片加水印

没有评论 2011年8月20日

 

有些网站没有自动加水印的功能,当然淘宝有,不过我没有去研究,下面只给大家说一下怎么样用美图秀秀来给需要上传的图片加水印吧。

首先打开随便一张图片做实验,我这张是截图的正在聊天的QQ秀了。在软件里点击文字—–输入静态文字,下面就会自动出现加文字的入口。

可以加上你需要加的字,网址什么的。这是我的淘宝网址就用这个举例吧。 继续阅读…

浅谈DIV+CSS

1条评论 2011年8月19日

在学校时没有学过DIV+CSS排版什么的,只懂得一些代码程序之类的,前几天朋友让我帮着做网站的时候我还犹豫来着,怎么才能找到合适的模板帮人家改一下啊,郁闷了好几天呢,正好同学也在我家住着,做网站不是那么方便,就跟他们说我可能做不了,朋友坚持说我的能力没有开发出来。其实我还是想做的,毕竟是有钱的嘛。呵呵。。。后来用SDCMS的一套后台愣是自己搞出来了首页的排版,还是跟效果图差不多的,自己非常欣慰了,主要是因为现在不仅能看懂CSS还能改动,突然觉得自己非常有成就感了。呵呵,要相信自己啊。。不过在这过程中还是遇到一些问题的。
当然什么事情都有两面性,这也一样。对于初学者来说最容易发现问题。根据百度百科里改一下吧。
优点:
一、使页面载入得更快(因为只用了这个没有对比性,我自己无从考证了。)
由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。 继续阅读…

PS制作弧形文字

没有评论 2011年8月6日

昨天一朋友让我帮忙做一个盖章的图片,以为两分钟的事,可是我忘记怎么做了,用扇形文字使劲在那改就是不出效果。后来才郁闷怎么写弧形文字的,为了不让大家也出现这种麻烦的情况,下面给大家简介说一下怎么用PS写出弧形文字吧。当然不止用来做印章,logo也是可以的了。
方法就是利用路径工具和文字工具来让文字沿着路径排列就行了。
1、制作顺时针弧线文字
先用椭圆工具画个圆形路径(找不到的话可以用快捷键U),然后选择文字工具,光标移到路径上,I型光标上多了一条折线,点击输入文字,输入的文字即沿着路径排列了。
2、制作逆时针弧线文字
对刚才的圆形路径进行放大,输入文字,文字依然是沿顺时针方向的。使用路径选择工具(黑色实心黑箭头图标),光标移到文字起始位置处的小圆圈附近,光标上多出了向左或向右的箭头,拖动向右,文字即变成了在路径上方沿逆时针方向排列了。
图片就不在这列出来了,具体使用的时候一看就知道了。

网页排版布局的误区

没有评论 2011年6月14日

经常看到许多设计师在设计网站首页的时候,总是喜欢把网页排版搞的很复杂,因为他们觉得这样的设计有以下几个好处:

1、热闹:让用户感觉到自己网站很有人气的样子;
2、大气:因为此类排版是模仿门户网站风格的,所以显得大气和专业。
其实,这是一种自欺欺人的设计,效果只能使得其反。因为:
1、关于热闹:
虽然把排版搞的很复杂,另外加许多花花绿绿的图片看起来很热闹,但是也仅仅是看起来很热闹罢了,对于普通用户而言,他根本不关心这种感觉,用户需要的是快速找到自己需要的信息。打开这样的网页,会让用户找不到重点,会让用户发晕,更会让用户觉得你这个网站没特点,然后很快就关闭你的网站了。
今天看到一个关于影视的网站,整个网站全是用Flash设计的,没有一点简介的意思,而且北京用的是黑灰色的长城图片,Flash网站让人看得眼花缭乱,我不反对Flash建设网站,但是不希望过多在这上面浪费时间,如果单从用户方面而不是优化角度,我也认为这个网站根本就不值得看,太乱了。
2、关于大气因为网站之所以那样设计,是有历史原因的,因为早期主要靠卖广告位,而客户就需要买首页,首页搞的很复杂,广告位才能多。你的网站也这样设计的话,你这样模仿门户网站,只能模仿来用户网站首页的形,但是你也搞不来门户网站的流量。
曾经有一个朋友,个人做了一个网站,直接抄袭了三大门户,然后把三大门户某频道整合到了一起,看起来非常大气,每当给朋友介绍自己网站的时候,一打开网站,就会让对方大吃一惊,觉得他的网站至少是由上百人做出来的,这位朋友此时会得意一番。但是呢?他这个网站做了三四年,也没赚什么钱,为什么呢?因为他根本不吸引用户,做了两年,每天都还不到200IP。
所以,在设计网页排版的时候,千万不要玩这种自欺欺人的排版设计,特别是一会儿两列,一会儿三列,然后又一列,最后再四列的那种排版.
其实,就算一个网页内容比较多,但是排版布局不乱,用户一样会觉得比较方便和舒服。如何做呢?
遵循一个核心原则:别让用户总摇头,多让用户多点头。
什么意思呢?
简单一点,要两列,就两列到底,要三列,就算列到底,这样用户从上往下看,一目了然。从上弯下,头必然会点头,就会让用户潜意识不断确认和肯定。
如果一会三列,一会儿四列很乱,结构很乱的话,用火必须让头左右不断转动才能浏览,左右转动就是摇头,摇头就会让用户潜意识不断的拒绝和否定。
所以,在搞网页设计的时候,建议设计师朋友不要盲目的按照同行或者习惯的形式主义来设计。而是要以用户很中心来设计。针对首页,保持以下几个原则:
1、吸引眼球:让人立刻知道你是干什么的
2、超级导航:让用户能够迅速找到自己需要的信息,导航一定要做好。但是我不建议大家都用那种纯粹的模板,看起来没有什么技术含量,我看过很多套模板的网站,当然那种网站的所有人也不知道这是怎么做出来的,但是专业人士一眼就能看出来那只是在模板上改了几个汉字而已。我讨厌那种感觉,那简直就是在浪费资源。可以适当的新颖一些,但是现在的建站公司是以利益
为主的嘛,管它什么作品,只要客户满意就什么都好办,其实客户如果懂还能让你做?真是欺骗外行人啊!
3、精华内容:适当把最吸引用户的精华内容展现出来,方便用户和搜索。
尽量使自己的网页看起来舒服,当然简介大方让人看起来清新一目了然,否则你进入一个网站找了好长时间都没有找到你需要找的信息,那你还继续找吗?你的时间比别人多?

添加网站悬浮标志或QQ最简单的方法

没有评论 2010年11月20日

这两天应客户要求做一个在网站右侧悬浮的QQ标志(客户设计好了QQ的样式)。本来这是个很简单的任务,可调整了好半天才弄好。不是代码太长,就是位置不正,再或者不能实现悬浮。

不过事在人为,经过几个小时的整理,总算弄出来一段还算简洁实用的代码。还是先来看看代码:

(不知为什么代码发表出来总是不完整,所以将其打包后供大家下载。)

这段代码的用法就很简单了,里面的<javascript>代码不要动。将他一起放到你想插入的网站里。其中<div class=”qbox” id=”divQQbox”>……</div>之间的内容就是悬浮物或QQ的样式了。<style>……</style>是他的CSS样式信息。通过修改他和javascript就可以实现在网站的任何位置悬浮。

演示文件和源代码下载地址:qq悬浮

鼠标点击后显示与隐藏的例子

没有评论 2010年11月9日

<!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=gb2312″ />
<title>一个简单的点击后显示与隐藏表格的例子</title>
<script type=”text/javascript”>
function toggle( targetId ) {
if (document.getElementById){
target = document.getElementById( targetId );
if ( target.style.display == “none”) {
target.style.display = “”;
} else {
target.style.display = “none”;
}
}
}
</script>
</head> 继续阅读…

书到用时方恨少-我学GIMP的方法

2 条评论 2010年8月25日

最近这段时间,网站制作的任务就跟不要命的陨石一样砸了下来。一时之间没有适应过来,导致好多天没更新博客。不过,也是因为这些任务,让我有了发表的题材。俗话说的好“会者不难”,我现在就是处在这种相反的境况中。因为某些东西,我还真的不熟悉。那就是,图片的设计制作。一直以来都是以程序为主,经常做的也就是切图布局、后台编程。最大的也就是修饰一下图片,这下可好,让我自己去制作图片。

没办法,任务下来了不做是不行的。这时只恨自己以前怎么不多学点这方面的东西呢。虽然到用时才觉得重要,可也不能为以后添加麻烦。说不定以后什么时侯又用到了,所以做个决心,开始学做图片。

说起来是轻松,可实际做起来可真够难的。在linux下用wine运行photoshop必竟不太理想。只能选择跨平台的GIMP。说起来,GIMP的教程和photoshop的都没法比,不是一个量级的。不过还好,photoshop能完成的GIMP基本都能完成。也就没有了任何的后顾之忧。接下来就是花段时间好好学GIMP了。

从头看教程,时间太长,也不适合我的学习方式。个人觉得只有实践才能出真知,按照别人做图片的步骤亲自操作几遍。要比你看半天书学的多的多。举例来说吧:我从教程里学了1个小时,终于弄懂了某个工具能干什么用。而到实际做图的时候,就在想,这个软件添加这个工具有什么用,根本没什么用处吗。而若从例子中学时,就会有一种,这种工具原来是这么用的感觉。再比如:学锄地,老师花一天的时间给你介绍锄头的特性及用法,再好一点的老师甚至把锄头的制作方法,分子组成都告诉了你。你虽然什么都知道了,可还是不会用。而跟着父母去地里干上一小时活,你甚至都能自己创造几种用法。

从学习的经历中,我发现了个问题。越是想学的完整的人,越是什么也学不到。而零零散散学东西的人,到最后却什么都学会了。我不知道这是为什么,也许是前者意志不够坚定的原因吧。也有可能是后者因为没有系统的学习而导致经常犯错误,而真正的知识也就是从错误中学来的。比如,以前我学习时,为了能完完整整的学会某些知识。把有关该知识的所有介绍资料都统统看一遍,甚至听人们说介绍的不完全的资料我从来都不看,只看介绍全的资料,以求一字不剩的将这些知识都学会。可是结果却让我哑然,我不但没能掌握这些知识,甚至到最后,我连这些知识介绍了什么都不知道,更别谈什么应用了。而自己以前不在乎的知识,只是随便看看学点就行了。可就是这种随便的心态让我精通了编程,页面的布局,后台的创作。真是有点自己搞自己的笑话。

话好像说多了,还是把我学GIMP的小例子与大家分享一下吧。把下面链接中的例子操作一遍,基本上把GIMP认的差不多了。自己作图也是小菜了,不过还得个人经常的创新才行。要是怕犯错就不用学了,要是一个错都没犯,基本上也没学到什么知识。只有不断的犯错,并从错误中学到经验才能真正的学会知识。当你回忆时也会因为“做这个例子时我把XX给弄错了”而给自己的生活添加色彩,不是吗?学校里老师从小就教我们,不能犯错误。可是长大了,基本上是跟老师教的对着干。哈哈,不管怎么样吧。还是那句话,真正对自己有用的才是有效的。

GIMP操作实例:http://www.verycd.com/groups/c/741772.topic

这上面介绍的例子很少,不过很有用。如果做完了,可以从网上再搜索一些其他的例子做。只要懂得方法,不愁学不到知识。

有效去除网页顶部空白的方法

3 条评论 2010年8月12日

今天做好一个网页,预览的时候出现了个怪事。网页顶部和左侧都有一段空白,使网页偏离了一点。本能的就去查看css设置文件。可里面的设置很正确

.body{margin:0;padding:0}

照常理来说是不应该出现这样的状况的。一时间,让我百思不得其解。在网上找了半天没发现什么有用的信息。不过在查看教程时无意发现了几个属性,尝试着添加上,居然去除了这些可恶的空白。

这几个属性需要添加到<body>中。我的代码是这样的:

<body  topmargin=”0″ marginheight=”0″ leftmargin=”0″>

将这几个属性添加上后一切正常。

后来,在网上查了一下这几个属性。原来是很普通的,设置浏览器与页面边距的属性。只是不同的浏览器显示的不一样。跟margin的属性差不多。ie下识别topmargin但是firefox下却不识别。所以,应该两个属性一起用才能在各浏览器中得到想要的结果。

解决了这个问题并没有多大的开心,因为以前我也没有添加过这个属性。制作网页时都正常,为什么这么长时间没事,偏偏这次出了问题呢?想来想去只想到了是编辑器的问题。一试,果然是这样。以前用的是pspad,很正常。而现在用的是vim,就出现了问题。不过,我还是觉得用vim比较好,不只是它好用,最主要的是能让我多学点东西。