C++博客-Welcome to 陈俊峰's ---BeetleHeaded Man Blog !-随笔分类-网页制作http://www.cppblog.com/Jeff-Chen/category/1668.htmlzh-cnWed, 28 May 2008 20:37:58 GMTWed, 28 May 2008 20:37:58 GMT60什么是搜索引擎优化？http://www.cppblog.com/Jeff-Chen/archive/2006/05/13/7062.htmlJeff-ChenJeff-ChenSat, 13 May 2006 04:58:00 GMThttp://www.cppblog.com/Jeff-Chen/archive/2006/05/13/7062.htmlhttp://www.cppblog.com/Jeff-Chen/comments/7062.htmlhttp://www.cppblog.com/Jeff-Chen/archive/2006/05/13/7062.html#Feedback0http://www.cppblog.com/Jeff-Chen/comments/commentRss/7062.htmlhttp://www.cppblog.com/Jeff-Chen/services/trackbacks/7062.html 【摘要】：搜索引擎优化（Search Engine Optimization, 简称SEO），与搜索引擎定位（Search Engine Positioning)和搜索引擎排名(Search Engine Ranking)是同一种工作，指通过了解各类搜索引擎如何抓取互联网页面，如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售能力或宣传能力的技术。

搜索是除了电子邮件以外被用得最多的网络行为方式。通过搜索引擎查找是网络冲浪者寻找网上信息和资源的主要手段。搜索引擎营销已经成为网络营销最重要的组成部分。如何使自己的网站被主要的搜索引擎收录、然后获得较高的排名，成为网站建设者们绞尽脑汁的话题。

要想达到目的，你就得学会搜索引擎优化！为此，你需要了解下面几个方面的知识：

1)了解搜索引擎如何抓取网页和如何索引网页。
你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot或叫web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

2)Meta标签优化。
主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

3)如何选取关键词并在网页中放置关键词。
搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

4)了解主要的搜索引擎。
虽然搜索引擎有成千上万，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Inktomi，Altavista等；中文的有百度，搜狐等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如Yahoo和AOL网页搜索用的是Google的搜索技术，MSN用的是Looksmart和Open Directory的技术。

5)主要的互联网目录。
Yahoo自身不是搜索引擎，而是一个大型的网站目录，Open Directory也不是，他们和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。

6)按点击付费的搜索引擎。
搜索引擎也需要赢利，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。

7)搜索引擎登录。
网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。虽然免费已经不再是互联网（至少是搜索引擎）的主流－如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。

8)链接交换和链接广泛度（Link Popularity）。
网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。所以，你得花很多精力去做和别人做交换链接。



Jeff-Chen 2006-05-13 12:58 发表评论
]]>部分VBScript函数http://www.cppblog.com/Jeff-Chen/archive/2006/05/10/6882.htmlJeff-ChenJeff-ChenWed, 10 May 2006 08:47:00 GMThttp://www.cppblog.com/Jeff-Chen/archive/2006/05/10/6882.htmlhttp://www.cppblog.com/Jeff-Chen/comments/6882.htmlhttp://www.cppblog.com/Jeff-Chen/archive/2006/05/10/6882.html#Feedback0http://www.cppblog.com/Jeff-Chen/comments/commentRss/6882.htmlhttp://www.cppblog.com/Jeff-Chen/services/trackbacks/6882.html功能:创建一个数组变量　
格式:array(list)　
参数:list　为数组变量中的每个数值列,中间用逗号间隔　
例子:　
<%　i　=　array　(“1”,”2”,”3”)　%>　
结果:　i　被赋予为数组　
2.函数cint()　
功能:将一表达式/其它类型的变量转换成整数类型(int)　
格式:cint(expression)　
参数:expression　是任何有效的表达式/其它类型的变量　
例子:　
<%　
f　=　”234”　
response.write　cint(f)　+　2　
%>　
结果:　236　
函数cint()将字符”234”转换　成整数234.如果表达式为空,　或者无效时,返回值为0;　
3.函数:creatobject()　
功能:创建及返回一个activex对象.　
格式:creatobject(obname)　
参数bname　是对象的名称　
例子:　
<%　
set　con　=　server.createobject(“adodb.connection”)　
%>　
结果:　
4.函数cstr()　
功能:将一表达式/其它类型的变量转换成字符类型(string)　
格式:cstr(expression)　
参数:expression是任何有效的表达式/其它类型的变量　
例子:　
<%　
s　=　3　+　2　
response.write　”the　result　is:　”　&　cstr(s)　
%>　
结果:函数cstr()将整数　5　转换　成字符”5”.　
5.函数date()　
功能:返回当前系统(server端)的日期　
格式:　date()　
参数:无　
例子<%　date　()　%>　
结果:05/10/00　
6.函数dateadd()　
功能:计算某个指定的时间和　
格式:　dateadd(timeinterval,number,date)　
参数:timeinterval是时间单位(月,日..);　number是时间间隔值,date是时间始点.　
例子:　
<%　
currentdate　=　#8/4/99#　
newdate　=　dateadd(“m”,3,currentdate)　
response.write　newdate　
%>　<%　
currentdate　=　#12:34:45　pm#　
newdate　=　dateadd(“h”,3,currentdate)　
response.write　newdate　
%>　
结果:　
11/4/99　
3:34:45　pm　
其中　
“m”　=　”month”;　
“d”　=　”day”;　
如果是currentdate　格式,则,　
“h”　=　”hour”;　
“s”　=　”second”;　
7.函数datediff()　
功能:计算某量个指定的时间差　
格式:　datediff(timeinterval,date1,date2[,firstdayofweek[,firstdayofyear]])　
参数:　timeinterval　是时间单位;　date1,date2是有效的日期表达式,firstdayofweek,firstdayofyear　是任意选项.　
例子:　
<%　
fromdate　=　#8/4/99#　
todate　=　#1/1/2000#　
response.write　”there　are　”　&　_　
datediff(“d”,fromdate,todate)　&　_　
“　days　to　millenium　from　8/4/99.”　
%>　
结果:there　are　150　days　to　millenium　from　8/4/99.　
8.函数day()　
功能:返回一个整数值,对应于某月的某日　
格式:　day(date)　
参数:　date是一个有效的日期表达式;　
例子<%　=date(#8/4/99#)　%>　
结果:4　
9.函数formatcurrency()　
功能:转换成货币格式　
格式:　formatcurrency(expression　[,digit[,leadingdigit[,paren[,groupdigit]]]])　
参数:　expression　是有效的数字表达式;digit表示小数点后的位数;leadingdigit,paren,groupdigit是任意选项.　
例子<%=formatcurrency(34.3456)%>　
结果34.35　
10.函数formatdatetime()　
功能:格式化日期表达式/变量　
格式:　formatdatetime(date[,nameformat])　
参数:　date为有效的日期表达式/变量;nameformat是指定的日期格式常量名称.　
例子<%　=formatdatetime(“08/04/99”,vblongdate)　%>　
结果:wednesday,august　04,1999　
说明:　
--------------------------------------------------------------------------------
描述
返回表达式，此表达式已被格式化为日期或时间。　
语法
formatdatetime(date[,　namedformat])
formatdatetime　函数的语法有以下参数：

参数　描述　
date　必选项。要被格式化的日期表达式。　
namedformat　可选项。指示所使用的日期/时间格式的数值，如果省略，则使用　vbgeneraldate。　

设置
namedformat　参数可以有以下值：
常数　值　描述　
vbgeneraldate　0　显示日期和/或时间。如果有日期部分，则将该部分显示为短日期格式。如果有时间部分，则将该部分显示为长时间格式。如果都存在，则显示所有部分。　
vblongdate　1　使用计算机区域设置中指定的长日期格式显示日期。　
vbshortdate　2　使用计算机区域设置中指定的短日期格式显示日期。　
vblongtime　3　使用计算机区域设置中指定的时间格式显示时间。　
vbshorttime　4　使用　24　小时格式　(hh:mm)　显示时间。　

说明
下面例子利用　formatdatetime　函数把表达式格式化为长日期型并且把它赋给　mydatetime:　
function　getcurrentdate　
“formatdatetime　把日期型格式化为长日期型。
getcurrentdate　=　formatdatetime(date,　1)　
end　function
--------------------------------------------------------------------------------
　

11.函数isnumeric()　
功能:返回一个布尔值,判断变量是否为数字变量,或者是可以转换成数字的其它变量.　
格式:isnumeric(expression)　
参数:expression　是任意的变量.　
例子:　
<%　
i=“234”　
response.write　isnumeric(i)　
%>　
结果:　true.　
12.函数isobject()　
功能:返回一个布尔值,判断变量是否为对象的变量,　
格式:　isobject(expression)　
参数:　expression　是任意的变量.　
例子:　
<%　
set　con　=server.creatobject(“adodb.connection”)　
response.write　isobject(con)　
%>　
结果:　true　
13.函数:lbound()　
功能:返回一个数组的下界.　
格式:lbound(arrayname[,dimension])　
参数:arrayname　是数组变量,dimension　是任意项　
例子:　
<%　
i　=　array(“1”,”2”,”3”)　
response.write　lbound(i)　
%>　
结果:0
14.函数lcase()　
功能:将一字符类型变量的字符全部变换小写字符.　
格式:lcase(string)　
参数:string是字符串变量　
例子:　
<%　
str=“this　is　lcase!”　
response.write　lcase(str)　
%>　
结果:this　is　lcase!　
15.函数left()　
功能:截取一个字符串的前部分;　
格式:left(string,length)　
参数:string字符串,length截取的长度.　
例子:　<%　=left(“this　is　a　test!”,6)　%>　
结果:this　i　
16.函数len()　
功能:返回字符串长度或者变量的字节长度　
格式:len(string　*varname)　
参数:string字符串;varname任意的变量名称　
例子:　
<%　
strtest=“this　is　a　test!”　
response.write　left(strtest)　
%>　
结果:15　
17.函数ltrim()　
功能:去掉字符串前的空格.　
格式:ltrim(string)　
参数:string　字符串.　
例子:　<%　=ltrim　(“　this　is　a　test!”)　
结果:this　is　a　test!　
18.函数mid()　
功能:从字符串中截取字符串.　
格式:mid(string,start　[,length])　
参数:string字符串,start截取的起点,length要截取的长度.　
例子:　
<%　
strtest=“this　is　a　test,　today　is　monday!”　
response.write　mid(strtest,17,5)　
%>　
结果:today　
19.函数minute()　
功能:返回一数值,　表示分钟　
格式:minute(time)　
参数:　time是时间变量　
例子lt;%　=minute(#12:23:34#)　%>　
结果:23　
20.函数month()　
功能:返回一数值,　表示月份　
格式:month(time)　
参数:time是日期变量　
例子<%　=month(#08/09/99)　%>　
结果:9　
[color=#1e90ff]21.函数monthname()[/color]　
功能:返回月份的字符串(名称).　
格式:monthname(date　[,abb])　
参数:　date是日期变量,abb=true时　则月份的缩写,　
例子:　
<%　=monthname(#4/5/99#)　%>　
结果:april　
22.函数now()　
功能:返回系统的当前时间和日期.　
格式:now()　
参数:无　
例子:　
<%　=now()　%>　
结果:　05/10/00　8:45:32　pm　
23.函数:replace()　
功能:在字符串中查找,替代指定的字符串.　
格式:replace(strtobesearched,strsearchfor,strreplacewith　[,start[,count[,compare]]])　
参数:strtobesearched是字符串;　strsearchfor是被查找的子字符串;strreplacewith　是用来替代的子字符串.start,count,compare　是任意选项.　
例子:　
<%　
strtest=“this　is　an　apple.”　
response.write　replace(strtest,”apple”,”orange”)　
%>　
结果:this　is　an　orange.　
24.函数right()　
功能:截取一个字符串的后部分　
格式:right(string,length)　
参数:string字符串,length截取的长度.　
例子:　
<%　
strtest=“this　is　a　test!”　
response.write　right(strtest,3)　
%>　
结果:st!　
25.函数rnd()　
功能:返回一个随机数值　
格式:rnd[(number)]　
参数:number是任意数值.　
例子:　
<%　
randomize()　
response.write　rnd()　
%>　
结果:0/1数值之一,无randomize(),　则不能产生随机数.　
26.函数round()　
功能:完整数值　
格式:round(expression[,numright])　
参数:expression数字表达式;numright任意选项.　
例子:　
<%　
i=12.33654　
response.write　round(i)　
%>　
结果:　12　
27.函数rtrim()　
功能:去掉字符串后的空格.　
格式:rtrim(string)　
参数:string　是字符串　
例子:　
<%　
response.write　rtrim(“this　is　a　test!　”)　
%>　
结果:this　is　a　test!　
28.函数second()　
功能:返回一个整数值.　
格式:second(time)　
参数:time是一个有效的时间表达式;　
例子lt;%　=second(#　12:28:30#)　%>　
结果:30　
29.函数strreverse()　
功能:返回与原字符串排列逆向的字符串.　
格式:strreverse(string)　
参数:string是字符串　
例子<%　=strreverse(“this　is　a　test!”)　
结果:!tset　a　si　siht　
30.函数time()　
功能:返回当前系统的时间值.　
格式:time()　
参数:无　
结果:9:58:28　am　
31.函数trim()　
功能:删去字符串前,后的空格.　
格式:trim(string)　
参数:string　字符串.　
例子:　
<%　
strtest=“　this　is　a　test!　”　
response.write　trim(strtest)　
%>　
结果:this　is　a　test!　
32.函数ubound()　
功能:返回一个数组的上界.　
格式:ubound(expression　[,dimension])　
参数:expression　是数组表达式/数组变量,dimension　是任意项　
例子:　
<%　
i　=　array(“1”,”2”,”3”)　
response.write　ubound(i)　
%>　
结果:　2　
33.函数:ucase()　
功能:将一字符类型变量的字符全部变换成大写字符.　
格式:ucase(string)　
参数:string是字符串变量　
例子:　
<%　
str=“this　is　lcase!”　
response.write　lcase(str)　
%>　
结果:this　is　lcase!　
34.函数vartype()　
功能:返回变量的常量代码(整数)　
格式:vartype(varname)　
参数:varname是任何类型的变量名称.　
例子:　
<%　
i=5　
response.write　vartype(i)　
%>　
结果:2　(2表示整数,须要参考asp常量代码.)　
35.函数weekday()　
功能:返回一个整数,对应一周中的第几天.　
格式:weekday(date　[,firstofweek])　
参数:　date为日期变量,firstofweek为任选项.　
例子:　
<%　
d=　#　5/9/00　#　
response.write　weekday(d)　%>　
结果:3(3　表示是星期二)　
36.函数weekdayname()　
功能:返回字符串,对应星期几.　
格式:weekdayname(weekday[,abb[,firstdayofweek]])　
参数:weekday为日期变量,abb,firstdayofweek为任选项.　
例子:　
<%　
d　=　#8/4/99#　
response.write　weekdayname(d)　
%>　
结果:　wednesday　
37.函数year()　
功能:返回日期表达式所在的年份.　
格式:year(date)　
参数:　date是有效的日期表达式　
例子:　
<%　=year(#8/9/99#)　%>　
结果:1999　
38.函数mod()功能:取余数.
例子:3　mod　2　
结果:1



Jeff-Chen 2006-05-10 16:47 发表评论
]]>要找免费的Mini pixel icon 到这来http://www.cppblog.com/Jeff-Chen/archive/2006/05/09/6828.htmlJeff-ChenJeff-ChenTue, 09 May 2006 09:07:00 GMThttp://www.cppblog.com/Jeff-Chen/archive/2006/05/09/6828.htmlhttp://www.cppblog.com/Jeff-Chen/comments/6828.htmlhttp://www.cppblog.com/Jeff-Chen/archive/2006/05/09/6828.html#Feedback0http://www.cppblog.com/Jeff-Chen/comments/commentRss/6828.htmlhttp://www.cppblog.com/Jeff-Chen/services/trackbacks/6828.html来源：http://www.webstudio.com.cn/blog  ( egoldy flashblog )

1.ndesign-studio.com(294 hits)上的320个免费的迷你像素icon.
想要的快去下载.不过有一点,如果在你的网站上应用些像素图标超过10个的进候不要忘记要加上ndesign-studio.com的链接.
2.sample(241 hits)
3.downlaod(187 hits)
4. 去iconbuffet(413 hits)注册一个账号，点击free delivery，就可以看到你得到的免费的icon了，各种格式都包括，大小为16*16,24*24,32*32.还包括mac版本．下面是我得到的免费的icon.想得到其它几组icon需要由其它人来分配．不过这个很容易，如果我们得到的是不同的icon组可以进行交换．

如果你有兴趣并得到不同的组我们就可以交换了．我的这一组名是Taipei Night Market
BTW:几天没回北京，打开电脑，发现macromedia的网站已经变成了adobe.，页面风格也趋近于adobe.虽然早就知道会有这么一天．但macromedia这个名字真正不在主导地位时，不免有些伤感，从furture splash到今天的flash8，macromedia的努力的结果，收于adobe口袋里．不过不知adobe是不是也有野心想搞搞垄断．:(
5.E-Mail Icon Generator可以生成gmail,msn,aol,yahoo,sina等等许多邮箱的Icon.不需要自已在ＰＳ制作了．以前看有人作过，兴许也是用这个．下面是生成的gmail Icon,:)



有兴趣的话去生成一个这里(523 hits)             URL:  http://services.nexodyne.com/email/index.php



Jeff-Chen 2006-05-09 17:07 发表评论
]]>如何在网页中插入CSS http://www.cppblog.com/Jeff-Chen/archive/2006/05/09/6821.htmlJeff-ChenJeff-ChenTue, 09 May 2006 07:57:00 GMThttp://www.cppblog.com/Jeff-Chen/archive/2006/05/09/6821.htmlhttp://www.cppblog.com/Jeff-Chen/comments/6821.htmlhttp://www.cppblog.com/Jeff-Chen/archive/2006/05/09/6821.html#Feedback0http://www.cppblog.com/Jeff-Chen/comments/commentRss/6821.htmlhttp://www.cppblog.com/Jeff-Chen/services/trackbacks/6821.html

前两章我们了解了CSS的语法，但要想在浏览器中显示出效果，就要让浏览器识别并调用。当浏览器读取样式表时，要依照文本格式来读，这里介绍四种在页面中插入样式表的方法：链入外部样式表、内部样式表、导入外表样式表和内嵌样式。

　　链入外部样式表

链入外部样式表是把样式表保存为一个样式表文件，然后在页面中?lt;link>标记链接到这个样式表文件，这个<link>标记必须放到页面的<head>区内，如下：
<head>
……
<link rel="stylesheet" type="text/css" href="mystyle.css">
……
</head>
上面这个例子表示浏览器从mystyle.css文件中以文档格式读出定义的样式表。rel=”stylesheet”是指在页面中使用这个外部的样式表。type=”text/css”是指文件的类型是样式表文本。href=”mystyle.css”是文件所在的位置。

一个外部样式表文件可以应用于多个页面。当你改变这个样式表文件时，所有页面的样式都随之而改变。在制作大量相同样式页面的网站时，非常有用，不仅减少了重复的工作量，而且有利于以后的修改、编辑，浏览时也减少了重复下载代码。

样式表文件可以用任何文本编辑器（例如：记事本）打开并编辑，一般样式表文件扩展名为.css。内容是定义的样式表，不包含HTML标记，mystyle.css这个文件的内容如下：
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
（定义水平线的颜色为土黄；段落左边的空白边距为20象素；页面的背景图片为images目录下的back40.gif文件）

　　内部样式表

内部样式表是把样式表放到页面?lt;head>区里，这些定义的样式就应用到页面中了，样式表是用<style>标记插入的，从下例中可以看出<style>标记的用法：
<head>
……
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
……
</head>

注意：有些低版本的浏览器不能识别style标记，这意味着低版本的浏览器会忽略style标记里的内容，并把style标记里的内容以文本直接显示到页面上。为了避免这样的情况发生，我们用加HTML注释的方式（<!-- 注释 -->）隐藏内容而不让它显示：
<head>
……
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
……
</head>

　　导入外部样式表

导入外部样式表是指在内部样式表的<style>里导入一个外部样式表，导入时用@import，看下面这个实例：
<head>
……
<style type=”text/css”>
<!--
@import “mystyle.css”
其他样式表的声明
-->
</style>
……
</head>
例中@import “mystyle.css”表示导入mystyle.css样式表，注意使用时外部样式表的路径。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。实质上它相当于存在内部样式表中的。
注意：导入外部样式表必须在样式表的开始部分，在其他内部样式表上面。

　　内嵌样式

内嵌样式是混合在HTML标记里使用的，用这种方法，可以很简单的对某个元素单独定义样式。内嵌样式的使用是直接将在HTML标记里加入style参数。而style参数的内容就是CSS的属性和值，如下例：
<p style="color: sienna; margin-left: 20px">
这是一个段落
</p>
（这个段落颜色为土黄，左边距为20象素）
在style参数后面的引号里的内容相当于在样式表大括号里的内容。
注意：style参数可以应用于任意BODY内的元素（包括BODY本事），除了BASEFONT、PARAM和SCRIPT。

　　多重样式表的叠加

上一章里我们已经提到样式表的层叠顺序，这里我们讨论插入样式表的这几种方法的叠加，如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。例如，我们首先链入一个外部样式表，其中定义了h3选择符的color 、text-alig和font-size属性：
h3
{
color: red;
text-align: left;
font-size: 8pt
}
（标题3的文字颜色为红色；向左对齐；文字尺寸为8号字）
然后在内部样式表里也定义了h3选择符的text-align和font-size属性：
h3
{
text-align: right;
font-size: 20pt
}
（标题3文字向右对齐；尺寸为20号字）
那么这个页面叠加后的样式就是：
color: red;
text-align: right;
font-size: 20pt
（文字颜色为红色；向右对齐；尺寸为20号字）
字体颜色从外部样式表里保留下来，而对齐方式和字体尺寸都有定义时，按照后定义的优先而依照内部样式表。
注意：依照后定义的优先，所以优先级最高的是内嵌样式，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。


Jeff-Chen 2006-05-09 15:57 发表评论
]]>Dreamweaver 4.0技巧十二招http://www.cppblog.com/Jeff-Chen/archive/2006/05/09/6818.htmlJeff-ChenJeff-ChenTue, 09 May 2006 07:24:00 GMThttp://www.cppblog.com/Jeff-Chen/archive/2006/05/09/6818.htmlhttp://www.cppblog.com/Jeff-Chen/comments/6818.htmlhttp://www.cppblog.com/Jeff-Chen/archive/2006/05/09/6818.html#Feedback0http://www.cppblog.com/Jeff-Chen/comments/commentRss/6818.htmlhttp://www.cppblog.com/Jeff-Chen/services/trackbacks/6818.html
　　　　　　　　Dreamweaver 4.0技巧十二招


对想要在可视化的环境下制作复杂网页的专业网页制作者来说，Dreamweaver 已经渐渐在网页编辑工具市场中展露头角，成为专业人士编写网页的最佳选择。以目前的情况来说，Dreamweaver 内建的功能可说是越作越多、越作越丰富、齐备。在这里我要向大家介绍的4.0版本中的一些应用小技巧。

1. 让网页页面更有弹性

有些网页开发者称以下要介绍的这种技巧为 liquid，我在这儿则把这种技巧叫做是 stretchy（弹性延伸的技巧）。这是一种技巧，可在访客浏览器窗口大小改变时也随之调整网页页面大小，因此若是窗口过大就不会有空白处、窗口过小边缘就不会跑出上下移动的拉Bar。其实大多数简单的网页会自己随着浏览器窗口大小来调整页面大小，但是若是网页里用到很多不同的框框及表格，网页页面大小就很难自动弹性地调整。通常网页设计者会用混合运用固定栏宽的框框，和 GIF 图档作为间隔， 来设计网页页面，这样一来不论是用 Internet Explorer 或是用，页面大小都会固定而不会跑掉。用 Dreamweaver 4.0 可以轻而易举的设计出会自动弹性调整的网页。要怎么做呢？

用工具面版（Object palette）上的按钮开启网页，并且转换到 格式检视（ Layout view）。这时可以看到文字方块的列宽， 每一列的方框上方中间还有一个小小的下拉式箭头 ，选择想要设定弹性显示的列上方的小箭头，接着选择「将列设为弹性显示」（ Make Column Autostretch）。 （设定自动调整列宽以一列为限）这时该列方框上方就会出现一条波浪形的线，而不是原本表示列宽的数字。 Dreamweaver 会自动制作出固定版面的空格图文件，这个空白图文件是以列上方的两个长条形的空白表格表示，如此版面会自动被填充，才会完成弹性版面设定。（在第一次增加空白图文件时会跳出一个对话框问你是否要使用内建图档，为求效果，我建议你让 Dreamweaver 自动产生一个，不然就不用使用空白图文件来填充版面。）

2. 创造个性化调色盘

Dreamweaver 4.0 新的 Assets panel（属性控制面板）是一种可以在编辑网站时根据档案型态，例如图片、样板等来管理档案的新工具，当你定义新站台时（选择Site · New Site），所有类型的组件会自动增加到 Asset panel 里的适当表框中。这个加入新的Assets panel属性控制面版里也有颜色框，储存你网站里所用到的所有色彩，包含文字的颜色、背景的颜色，以及连结的颜色等。这是一个为使用者量身定做的网站导向颜色盘。只要激活 Assets panel （先选择 Window · 再选择 Assets），接着选择左方那个小小的色彩滚动条，就可以看到你网站里各式各样的颜色选项。当然你可以将这些颜色拉到某些特定选取的文字中。甚至当你选择某种颜色时，画面上会出现这种颜色的十六进制值的色彩浓淡度，和三色对应码（RGB）。如果想将调色盘工具列缩小一点，甚至可以仅加入某些颜色到调色盘的收藏夹里。只需将选取的颜色反白、选择窗口里一个叫做「添加到我的收藏夹」按钮（最下方靠右的按钮），就完成了。

3. 制作弹出式选单导览系统

原本要制作弹出式选单导览系统（Pop-up Menu Navigation System）要用到好一些 JavaScript 的语法技巧，但是若你装了Dreamweaver/Fireworks Studio，轻轻松松即可快速办到。首先在 Fireworks 里开始，选择某个图片， 然后在 Set Pop-Up Menu的对话框里选择 Insert· Pop-Up Menu，你可以输入项目（items）的名称并选择 Plus （加入）按钮，来新增该项目。你可以继续在跳出来的讯息框里进行细项设定，例如设定该项目所要用的文字及连结，当然也可以新增子选单、并重新安排下一层的设定。完成时，选择 Next （下一步），继续设定偏好值，例如颜色、字体等等。这时选单完成后，可以预览 HTML 语法，也可预览影像。再选择 Finish （完成）。这时当鼠标移动到原来的图案时，会出现选单系统的内容一览。 接着将制作好的档案汇出时， Fireworks 会自动生产出所有 Dreamweaver 需要用到的 HTML、JavaScript，以及影像档案。

4. 让图档动起来！

如果你同时安装有 Dreamweaver/Fireworks Studio，这两种产品搭配的完美程度将使你赞不绝口。即使你不是专业的图档设计者，在设计网页时也多多少少想把一些 GIF 图片文件修改得活灵活现。Dreamweaver 可以让你制作动画不求人喔！在标准窗口里选择要进行修改的图片，然后在 Property Inspector 里选择编辑钮（Edit）。如果你安装的 Dreamweaver里附有 Fireworks， Fireworks 就是 Dreamweaver 预设图片编辑器，这时图片就会自动加载到 Fireworks。（若仔细看，各位会发现 Fireworks 的画面会出现 Editing From Dreamweaver 这样的文字和图样，指示你可以由Dreamweaver 里进行图片编辑。） 好了，现在在 Fireworks 里选择要编辑的图片，选择 Modify ·Animate ·Animate Selection。 接下来完成 Animate dialog box 里的设定，选定动画的框架数，动画移动的方向、透明度等等设定。你也可以选择 Frames 工具列设定移动速度，选择 Object 面版来改变设定。要汇出档案时，只要选择 Optimize 工具列，在档案类型的地方选择 Animated GIF。完成以后，Fireworks 就会自动将图片以最佳化设定汇出，并且自动将 GIF 图档更新，还会在 Dreamweaver 里将更新过的图档秀出来。选择 File ·Preview in Browser，这样就可以在浏览器里预览刚刚制作完成的可爱图档！

5. 让按钮有闪动效果

在 Dreamweaver中，不用有 Flash 程序，也可以制作有闪动效果的 Flash 按钮对象。 4.0 版内建有好几个 Flash 按钮对象，可以制作好几个不同形式的按钮。选择 Insert ·Interactive Images ·Flash Button 就可看到有哪些内建按钮。在对话框内甚至可以用鼠标指到想要使用的按钮形式，然后看看在浏览器里的效果如何。用鼠标光标把要用的按钮形式选起来，再依序输入参数，例如按钮上的文字、字形、颜色、连结等，或是自定文件名称。按 下OK。接下来就会有一个 SWF 档产生，档案并会自动置入你的网页中。按一下这个做好的档案，会看到 Property Inspector （属性明细）中会秀出档案的属性。将档案属性秀出来时，如果扩展档案属性明细表，会出现 Play （播放）钮，选择之后可以不用开启浏览器来预视按钮的闪动效果。

6. 制作流动文字

在网页中增加 流动文字就像增加我刚刚介绍的 Flash 按钮一样简单。相同地，不用安装 Flash，用 Dreamweaver 4.0 提供的新功能就可以轻松办到。常用 HTML 语法写网页、没有交互式媒体经验的网页制作者也可以轻松制作出小巧的 Flash 形式的流动文字。根据 Macromedia 表示，有97%的网络使用者可以观看有 Flash 效果的网页，因此这项新功能可以在不添加兼容性麻烦的情况下为网页增添一些浏览上与读者的互动性。选择Insert ·Interactive Images ·Flash Text，再将偏好设定一一填入（例如要变更效果的文字、字形、字体颜色及字体大小等等）。

7. 更改键盘快速键

Dreamweaver 可让使用者自定使用接口，这项设计十分有弹性。举例来说，使用者可以通过撰写程序（programming）或自行增加对象（object）的方式来更改选单。不必功力高深，你就可以更改键盘快速键，因为 Dreamweaver 有一项叫做Keyboard Shortcut Editor的图形接口，只要选择 Edit ·Keyboard Shortcuts，对话框将加载并列出可以更动的快速键一览表，让你把快速键改成自己习惯用的设定值。要更动快速键，只要使用现行设定（Current Set）和指令列（Command）的下拉选单，在现有的指令中找到想要更改的指令，接着选取目前的快速键，就会出现在快速键的列表中。另外，若要增加快速键设定，可以选择 Plus 钮、在键盘上敲入你想使用的新快速代表键，选择变更（Change）即可。同时你也可以选取某快速键、选择移除键（Minus ），就可以移除某个快速键。

8. 重新设定网站窗口（Site window）列宽

只要从 Site window 中选择View ·File View Columns ，就可以自定检视网站 （Site view）时列宽的大小及呈现方式。选取一列宽的名称，使用上下箭头重新调整，或不要勾选显示字段（Show field）以隐藏该列。另外，选择 Plus 钮也可以新增列，并自创列名。此外，你也可以借着在下拉式选单中选择现有的 note 来将列和 Design Note 产生关连。

9. 阅读网页原始档

当你开启 O'Reilly Code Reference（Window ·Reference）来检查属性或是浏览器的兼容性时，预设的窗口会以细小的字型显示出参考设定值。但是若你按下窗口右上方的右键钮（就在关闭按钮的下方），就会出现一排下拉式选单，可以在这边选择原始文件字体的大小（小型字，到中型字体以及大型字体）。选择大型字体比较不会虐待眼睛，因为这样你看 HTML 原始档时就不用拿着放大镜看屏幕了！

10. 新增 Flash 按钮

在上面我已经教你如何用20种预设的按钮类型，来制作 Dreamweaver 里的 Flash 按钮。这是不用另外安装任何档案或程序的方法。底下有另一种方法，就是安装Fireworks buttons，这种扩充功能和技巧五有相同效果。到 Exchange for Dreamweaver（Dreamweaver 扩充功能交换中心） ，输入"InstaGraphics Extensions for Dreamweaver" 的关键词搜寻，然后再下载这个 577K 的档案。转换到 Dreamweaver，选择 Commands ·Manage Extensions，再选择 File ·Install Extension，就可以开始安装。一旦重新激活 Dreamweaver，就有六个新奇有趣的按钮型态，包括 Surfboard 及 Bulletbar 在内， 这时只要使用 Insert ·Interactive Images ·Fireworks Button 指令，就可以制作出一个酷炫的按钮。你也可以用 commands ·Convert Bullets To Images 及 Commands ·Convert Text To Images，上述两种方法都可以自动执行 Fireworks。

11. 在网页中加入「设定成收藏夹」功能

在 Exchange里搜寻，你就可以发现 Add To Favorites的扩充功能。这个小小的档案才占 3K ，下载时间不会等太久，接着循相同步骤，由 Extension Manager加载 （Commands ·Manage Extensions, File ·Install Extension）。接着重新激活 Dreamweaver，这个新加载的扩充档案会在 Dreamweaver 里新增一项功能。如果你的中网页加入这个「加入收藏夹」的功能，这样一来网络使用者逛到你的网站时，轻轻一按，就可以轻易地将你的网站加入他使用浏览器的收藏夹（或是个人书签）。此外，你也可以自定收藏夹快捷方式名称，以及收藏夹快捷方式名称前中会出现的小图标（一般 IE 中收藏夹的快捷方式前面的小图标都是 IE 的默认值，若你有自己设计的小图标，那就酷多了。注意啦，这项功能只支持用 IE 4.0以及更高版本的浏览器。只要选择 Windows 选单里的Behavior 面版，再到 IE 功能下拉选单那儿选择此项功能，即可轻松激活此酷炫功能。

12. 超酷的图表

如果你想制作表格，还要自己花时间再逐字敲打网页原始码吗？不需要了，已经有现成的啦！到 Exchange下载 Form Builder extension，就有现成的表格，可让你马上复制包含像国家、性别、婚姻状况、年龄层及其它目录等的字段表格。到 Exchange下载这个小巧（只有11K） 的档案，然后经由 Extension Manager 安装进来（Commands ·Manage Extensions, File ·Install Extension）。然接着只要重新激活 Dreamweaver，选择Insert ·FormBuilder，就会在（Insert· FormBuilder ）中发现扩充档。选择了之后这时会有一个对话框出现，会秀出所有可以套用的格式选单。


Jeff-Chen 2006-05-09 15:24 发表评论
]]>