查看完整版本: 网页设计中常用的一些技巧

风云际 2005-7-16 23:54

网页设计中常用的一些技巧

[TABLE][TR][TD]作者:laolang    转贴自:网络    点击数:176    文章录入:风云际 [/TD][/TR][TR][TD][TR][TD][TR][TD]  让滚动条变色

这个很简单啦,只要在<head>和</head>间插入:

<style>
BODY{
scrollbar-base-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#aecde7;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;}
</style>

背景图象重复与否:[/B]

background-repeat:
repeat | repeat-x | repeat-y | no-repeat

注:
以上设置标签的意义
repeat   图象水平垂直方向都重复。
repeat-x  图象水平方向重复。
repeat-y  图象垂直方向重复。
no-repeat  图象不重复。

说:
定义图象重复方向是对于一些独特的图象定位而言。 

例:
background-repeat: repeat(设定背景图为重复,如果重复一般不必设置,这个是浏览器默认的。) 

背景图的地址最好写全,就是 [img]http://www.laolang.net/images/url.gif[/img][URL=http://~~/][COLOR=#0000ff]http://~~[/COLOR][/URL]因为据说,NETSCAPE4.0以下好象支持的不是很好。


背景图象是否随滚动条移动:

background-attachment: 
scroll | fixed
scroll属于浏览器默认的,也就是随滚动条移动,fixed为不动。


[B]给背景图定位:

---就是设置它显示在哪里.最上面top,还是左边left


background-position:
| [percentage | length]{1,2}
|[top | center | bottom]
| [left | center | right] 


background-position:[percentage | length]是用X(横坐标)y(纵坐标)定义,如background-position: 20px 40px;


background-position:[top | center | bottom] 和[left | center | right] 是一样的意思了,三个任意两个搭配可以产生不同的效果.
可以是background-position:top center;center bottom;top bottom;left,right.....


bottom:下,top:上,left:左,right:右,center:中.


下为像素与英文的对照:
top left = left top = 0% 0% 
top = top center = center top = 50% 0% 
right top = top right = 100% 0% 
left = left center = center left = 0% 50% 
center = center center = 50% 50% 
right = right center = center right = 100% 50% 
bottom left = left bottom = 0% 100% 
bottom = bottom center = center bottom = 50% 100% 
bottom right = right bottom = 100% 100% 


全部的设定:

{ background: background-color || background-image || background-repeat || background-attachment || background-position }


例:
body{ background: #ffffff; background-image: url( [img]http://www.laolang.net/images/url.gif[/img][URL=http://user.7host.com/bluemm/img/1bg.gif][COLOR=#0000ff]http://user.7host.com/bluemm/img/1bg.gif[/COLOR][/URL]); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom } 

 

关于背景图就说到这里啦,适当的应用可以让页子变得美美的,同时也可以加快下载速度哦:)


1.在主页中加入背景音乐 

---- 首先要准备一首MIDI音乐,将其命名为test.mid。在HTML中使用背景音乐的标记是< EMBED SRC="test.mid">,这个标记可以根据泥的需求,放置在< BODY>和< /BODY>之间的任何地方。这个标记放置的位置会出现一个类似媒体播放器的图案,利用它可以控制音乐播放或暂停。例如下面一条语句: 

---- < EMBED SRC="test.mid" WIDTH=120 HEIGHT=60> 

---- 就会出现一个控制面版让泥播放音乐,我们可以选择控制面版的大小。 

---- 如果泥希望一进入页面就播放背景音乐,而且不显示播放控制面板,并且可以重复播放,那么可以通过以下语句实现: 

---- < EMBED SRC="test.mid" HIDDEN="TRUE" AUTOSTART="TRUE" LOOP="TRUE"> 

---- 泥还可以通过以下语句插入背景音乐: 

---- < bgsound SRC="URL"> 

---- 如果需要循环播放,可以通过以下语句实现: 

---- < bgsound SRC="URL" loop="-1"> 

---- 按设定次数播放可以通过以下语句实现: 

---- < bgsound SRC="URL" LOOP="次数"> 

2.< EMBED>的属性 


---- < EMBED>可以放在< BODY>和< /BODY>之间的任何地方,在这个标记放置的位置会出现一个控制面板的图案,您可以视自己的需求把它放在适当的位置,也可以使用HIDDEN="TRUE"将面板隐藏起来,配合AUTOSTART="TRUE"作为背景音乐使用。

(注意喔,<bgsound>的语句是加在<head>与</head>之间的,而<EMBED>则是加在< BODY>和< /BODY>之间的任何地方) 


 
阴 影 文 字:

 
是不是好想去美化自己的站站,呵呵,其实很简单啦,只要以下代码:

<table style="FILTER: glow(color=#6699FF,direction=2)">
你要的文字 
</table>

其中color 是阴影的颜色,可以配合网页色调改变,direction 是设置阴影的强度。font color是原字体的颜色。

呵呵,发挥自己的想象力让字体变得更漂漂吧^_^


浮 雕 文 字 :

大家看到这些文字和普通的文字有什么区別吗?
是不是有一种刻在网页上的感觉?
这种效果做在叶面上也是挺漂亮的。
其实很简单,這是利用了CSS做出的。

首先,在<head>~</head>之間加入:

<style type="text/css">
<!--
.font{
FILTER: dropshadow(color=#FF9999, offx=1, offy=1, positive=1); FONT-FAMILY: "Verdana"; FONT-SIZE: 10pt; width:100%; COLOR: #66CCFF;}
//-->
</style>


然后,在<body>~</body>之間加入:

<a class="font" href=#>是不是有点浮雕的效果呢? 
<!--连接中使用 -->

<p class="font">是漂亮的顔色呢~!p^^q</p> 
<!--普通状态下使用-->


#发挥一下你的想象,利用背景色的搭配,一定可以做出不错的效果的。


半透明表格

SAMPLE: 

嘿,不让你看清我! 


实现这个效果很简单啦,请将以下代码拷贝至 <TABLE> 里面

style="FILTER: alpha(opacity=50)"


例如:
<table style="FILTER: alpha(opacity=50)" width="200" border="0" cellspacing="0" cellpadding="2" bgcolor="#CCFFFF"></table>

设置文本域的字体


请将以下代码拷贝至页面合适位置: 

<TEXTAREA STYLE="font:12px;font-family:Verdana;color:#666666">
输入内容
 

注:字体(font-family)还可以选用Arial,Tahoma等等;color可自行设定 


设置文本域的背景色


请将以下代码拷贝至页面合适位置: 

<TEXTAREA STYLE="background-color:#ffffff">
输入内容
 

注:background-color可自行设定,如设为 transparent ,则背景透明


设置文本域的边框


实线:
<TEXTAREA STYLE="border:1px solid #51bfe0">
输入内容
 


虚线:
<TEXTAREA STYLE="border:1px dashed #51bfe0">
输入内容
 


点线:
<TEXTAREA STYLE="border:2px dotted #51bfe0">
输入内容
 


设置文本域的背景图


请将以下代码拷贝至页面合适位置: 

<TEXTAREA STYLE="background-attachment: fixed; background-image: url(背景图所处位置)">
输入内容
 

注: fixed可以固定背景图,如不需要可不用。


给鼠标定义个性图片

活活,很多人问我主页的那个跟在鼠标后的小图是怎样实现的?嘿,其实简单的不得了,偶不喜欢太复杂的东西,活活,先看演示啦:

SAMPLE:鼠标放上来,是不是很可爱^_^

hoho,是不是很想把它用来装扮你的叶子?EASY啦,只要:

在<head>与</head>之间插入:

<style type=text/css>
a:hover {cursor:url("**.ani")}
BODY {cursor:url("**.ani")}
</style>

其中**是你的图标的名称,后缀名还可以是.cur和.ico的图标。

Q:: Dreamweaver实用七小招。
A: 一、从外部文档中粘贴时,如果只要文字而不想要其格式,可以使用 “Edit→paste as text” 命令,不要直接用 Ctrl+V 。


二、当有浏览者使用 Netscape 浏览页面时,在改变窗口大小的时候页面会花掉。在制作网页时就应该考虑到这个问题,可以通过点击 “Command→Add/Remove Netscape resize fix” 来加以解决,它可以使在 Netscape 中浏览页面时,改变窗口大小的时候页面不会花掉。


三、仅仅拷贝文字。当我们从 Dreamweaver 中拷贝文字到另一个应用程序的时候, HTML 代码和文字一起被拷贝过去了。一般我们都用快捷键 Ctrl + C 来拷贝,  如果在拷贝的时候多按一个 “C” 键则只拷贝选中的文字。


四、在 Dreamweaver 中输入空格是一件令人很头痛的事。如果你按下面的方法操作就会简单多了:先将 “ 中文输入法 ” 转换成全角状态,然后同时按下键盘上的 Shift+Ctrl+space 就可以插入一个空格 ( 可以连续输入 ) 。


五、 library 组件和 template 模板不用上传服务器,就可以正确预览使用了该组件或模板的页面。


六、不要在同一个页面同时使用表格和层来布置,在 Netscape 中会导致混乱,从属关系除外。


七、一次链接到两个网页。我们都知道超级链接一次只能连到一个页面。如果你要想一次在不同的框架页中打开文档,可以使用 “Go To URL”javascript 行为。打开一个有框架的网页,选择文字或图像,然后从行为面板中选择 “Go To URL” 。你会注意到 Dreamweaver 会在 “Go To URL” 对话框中显示所有可用的框架。选择其中一个你想链接的框架并输入相应的 URL 后再选择另一个框架并输入另一个 URL。

Q:: FLASH 文字特效六合一 。
A: 我们平时在 flash 中见到的文字特效都是一种效果,本实例将告诉您如何将同一段文字在一个动画中实现六中不同的效果,通过简单的代码控制即可实现,下面我们就来一起学习:)

我们的制作思路是:将不同效果的 as 控制代码放到不同的 mc 中,然后通过对 mc 的调用,从而实现了对文字特效的控制。

特效控制 mc 的制作:

特效 1:

1. 首先建立一个 movie clip, 命名为 appear, 进入 mc 的编辑区后 ` ,给图层 layer1 的第 1 桢加 as:

this._alpha = 0;

var act;

stop();

// 初始化,设置文本开始为不可见

2. 在第 2 桢插入一个关键桢,然后用文本工具画一个文本框,并在 properties 面板中设置此文本框为 dynamic text 动态文本框,并给文本框设置变量名 text,

3 .然后在第三桢插入一个关键桢,加如下 as:

if (this._alpha<100) {

this._alpha = this._alpha+4;

gotoAndPlay (2);

} else {

this._alpha = 100;

stop ();

}

// 通过对文本 _alpha 透明度属性的控制,实现文字渐显的效果,

下面按照特效 1 完全一样的方法,制作其余 5 个特效控制 mc, 唯一一点不同的是每个 mc 的第 3 关键桢的控制代码不同,分别如下所示:

特效 2(mc falldown)

if (this._alpha<100) {

this._alpha = this._alpha+5;

this._y = this._y+2;

gotoAndPlay (2);

} else {

this._alpha = 100;

stop ();

}

// 在特效 1---- 文字渐显效果的基础上,通过控制文本的 _y 属性实现文字的下坠效果

特效 3(mc random x&y)

a=this._x;

b=this._y;

if (Number(a)!=_root.rancon:x[i] or Number(b)!=_root.rancon:y[i]) {

this._x=this._x+(_root.rancon:x[i]-Number(a))/15;

this._y=this._y+(_root.rancon:y[i]-Number(b))/15;

//read the origan values in the rancon mc and set step number!

chax=Math.abs(this._x-_root.rancon:x[i])

chay=Math.abs(this._y-_root.rancon:y[i])

if(Number(chax)<1 && Number(chay)<1){

this._x=_root.rancon:x[i];

this._y=_root.rancon:y[i];

}

this._alpha = this._alpha+5;

gotoAndPlay (2);

} else {

this._alpha = 100;

stop ();

}

// 通过利用 random() 随机函数控制字母的 _y 和 _x 属性,来达到字母随机出现在舞台上, // 并渐显的效果

特效 4(mc x && y)

if (this._alpha<100) {

this._alpha = this._alpha+5;

this._y = this._y+2;

this._x= this._x+2;

gotoAndPlay (2);

} else {

this._alpha = 100;

stop ();

}

// 通过控制字母的 _x 和 _y 属性,实现文本从舞台四周向中间靠拢的效果

特效 5(mc xscale)

if (this._alpha<100) {

this._alpha = this._alpha+5;

this._x = this._x+5;

this._xscale = this._xscale-100;

gotoAndPlay (2);

} else {

this._alpha = 100;

stop ();

}

// 通过控制字母的 _xscale 属性,实现字母横向伸缩并渐显的效果

特效 6(mc yscale)

if (this._alpha<100) {

this._alpha = this._alpha+5;

this._y = this._y+3;

this._yscale = this._yscale-50;

gotoAndPlay (2);

} else {

this._alpha = 100;

stop ();

}

// 通过控制字母的 _yscale 属性,实现字母纵向伸缩并渐显的效果

到此,六种文字特效的控制代码就写好了,下面还需要编写对 mc 控制代码进行控制的 mc, 听起来蛮复杂的,其实很简单的,请跟我来。



总体控制 mc 的制作:

新建一个 movie clip 组件,命名为 con, 插入三个关键桢,在第 1 桢添加如下 as:

i=1;j=1;m=50;n=1;

var b =new Array();//ready for random

textnumber=length(_root:text);//read the length of text

for(i;i<=textnumber;i++){

duplicateMovieClip("/text", "text" add i, i);

set ("/text" add i add "/:text", _root:text.charAt(i, 1));//write a value from text to the duplicate mc

_root["text" add i]._x=30+n*9;//set the char"s _x

_root["text" add i]._y=m;// set the lines

if(i%45!=0){

n++;

}else{

m=m+30; //change the number of lines

n=1;

}

}

for (j;j<=textnumber;j++) {

a=1+random(textnumber);

if (Number(eval("/text" add a add "/:act"))==0) {

b[j]=a;//thank for janlay to make me understand how to range random number

set("/text" add a add "/:act",1);//to diffrent the true or false.

}else{

j--;//It"s important.Don"t forget it,or you will lost some mc.

}

}

// 利用数组,对舞台上的文本框中的单个字母进行存取,并加以控制,结合各个不同特效的控制代码,从而实现了不同效果的实现。
再第 2 关键桢加入如下 as:

_root["text" add b[j>.play();

在第 3 关键桢加如下 as:

j--;

if(Number(j)>=0){

gotoAndPlay (2);

}else{

stop();

}

// 判断文本是否已经都处理完

好了,游戏的所有控制部分都做好了,剩下的任务就是把它们组织到一起,布置主场景了。

布置主场景 :

回到主场景中,分别在图层 layer1 的 1,3,5,7,9,11 桢插入 6 个关键桢,每个关键桢的内容基本上也是相同的,首先以第 1 关键桢为例说明。

首先我们制作一个简单的按钮,用来选择不同的特效,然后依此排列 6 个在舞台的中间,

給第 1 个按钮加 as:

on (release) {

gotoAndStop (1);

}

給第 2 个按钮加 as:

on (release) {

gotoAndStop (2);

}

給第 3 个按钮加 as:

on (release) {

gotoAndStop (3);

}

給第 4 个按钮加 as:

on (release) {

gotoAndStop (4);

}

給第 5 个按钮加 as:

on (release) {

gotoAndStop (5);

}

給第 6 个按钮加 as:

on (release) {

gotoAndStop (6);
給第 1 个按钮加 as:

on (release) {

gotoAndStop (1);

}

給第 2 个按钮加 as:

on (release) {

gotoAndStop (2);

}

給第 3 个按钮加 as:

on (release) {

gotoAndStop (3);

}

給第 4 个按钮加 as:

on (release) {

gotoAndStop (4);

}

給第 5 个按钮加 as:

on (release) {

gotoAndStop (5);

}

給第 6 个按钮加 as:

on (release) {

gotoAndStop (6);


}

// 上面的代码作用都一样,都是跳到有某种文字特效控制 mc 的那桢,以便 mc 对文字

// 进行控制

最后給第一桢加 as: stop();

然后需要设置我们的主角,表演特效的文本,用文本工具在舞台的上方写一些文字,内容可以任意,注意,不要写在舞台上哦,一定要写在舞台的上方,然后就要设置控制特效的 mc 了,将 mc con 拖到场景中,在 properties 面板中取名为 con, 这个控制 mc 是每一祯都需要的,因为它的作用是控制动画总体,然后每一桢再放入分别控制不同特效的控制 mc, 都在 properties 面板中取名为 text, 将 mc appear 放到第 1 桢,将 mc falldown 放到第 3 桢,将 mc random x&y 放到第 5 桢,将 mc x && y 放到第 7 桢,将 mc xscale 放到第 9 桢,将 mc yscale 放到第 11 桢,最后,给每一个关键祯加上 as:stop(), 即可。

到此为止,整个动画就完成了,您也可以将自己的特效做成单独的控制 mc, 然后运用到主场景中,这样,您的特效就越来越多,这也可以成为积累文字特效的一种方法。


Q:: FrontPage 2000 常用快捷键一览表 。
A: FrontPage 2000 常用快捷键一览表:  
 
用于网页的快捷键:  
 
CTRL+N  创建新的网页
CTRL+O  打开网页
CTRL+K  在网页上创建超链接
CTRL+SHIFT+B  在 Web 浏览器中预览网页
 
CTRL+P  打印网页
CTRL+ SHIFT+8  显示不可打印的字符
CTRL+ /  显示 HTML 标记符
F5   刷新网页
 
CTRL(Shift)+TAB  在打开的网页之间切换
CTRL+F4   关闭网页
 
CTRL+S  保存网页
ALT+F4  退出 FrontPage
 
CTRL+F 在网页或 HTML 中查找文本 
CTRL+H  在网页或 HTML 中替换文本 
 
F7   检查网页上的拼写 
SHIFT+F7  在词典中查找文字 
 
ESC  取消操作 
CTRL+Z  撤消操作 
 
CTRL+Y  恢复或重复操作 
  
用于设置文本和段落格式的快捷键:  

CTRL+SHIFT+F  更改字体
CTRL+SHIFT+P  更改字号
 
CTRL+B 应用加粗格式 CTRL+U 应用下划线格式 
CTRL+I 应用斜体格式 CTRL+PLUS SIGN 应用上标格式 
CTRL+MINUS SIGN 应用下标格式 CTRL+ SHIFT+C 复制格式 
CTRL+SHIFT+V 粘贴格式 CTRL+SHIFT+Z 删除人工格式 
CTRL+E 将段落居中 CTRL+L 将段落左对齐 
CTRL+R 将段落右对齐 CTRL+M 将段落从左边缩进 
CTRL+ SHIFT+M 将段落从右边缩进 CTRL+ SHIFT+S 应用样式 
CTRL+SHIFT+ N 应用一般样式 CTRL+ SHIFT+L 应用列表样式 
 
用于编辑和移动文本与图形的快捷键:  
 
CTRL+BACKSPACE  删除向左所有字符
CTRL+DELETE   删除向右所有字符
 
SHIFT+ENTER  插入一行空白栏
CTRL+SHIFT+SPACEBAR  插入一空白字符

Q:: 十六则 DW 使用快技法 。
A: 1 、灵活运用样式 

   熟悉网页设计的网友就知道,调用 Style 的方法很多,我们可以单击鼠标右键选择 Custon Style 来调用 Style 标准,也可以在状态栏中的元素列表上单击右键来调用 Style 。虽然不同的方法达到的效果看似一样,但实际上产生的 HTML 代码则完全不同。比如用 Custon Style 来调用 Style 标准,在网页代码中就生成一个〈 span 〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素列表来调用 Style 。

2 、活用 Format Table 命令 

   在复杂的网页设计中,表格的应用是最多的,因为利用表格可以自由地控制文本和图象在网页上出现的具体位置,从而使整个网页看上去紧凑统一。 Dreamweaver 在这方面也不甘落后,我们可以使用其中的 “Format Table” (格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式,先将光标置于表格的任意一个单元格内,再选择 “Command”→“Format Table” 命令,  在随后出现的对话框中,从左边的列表中选择一个设计方案。按 “Apply” 键来查看效果,如果不满意的话,还可以重新设置或者修改部分参数的值,如边界粗细,背景颜色等等。 

3 、同时链接到两个网页 

   我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档,可以使用 “Go To URL”javascript 行为。打开一个有框架的网页,选择文字或图象,然后从行为面板中选择 “Go To URL” 。我们会注意到 Dreamweaver 会在 “Go To URL” 对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的 URL 后再选择另一个框架并输入另一个 URL 。 

4 、不给文件起中文名称 

   大家在制作好了网页后,通常会给网页起一个具有代表性的中文名称,一来能使人一看文件名就能大概了解文件所包含的内容,二来能够方便各个超级链接之间的相互调用。但如果你在 Dreamweaver 中这样做,就会发现 Dreamweaver 对中文文件名支持得不是太好,经常会有页面调用不正确的现象发生,所以我们以后在 Dreamweaver 中保存网页的时候,尽量用英文或者数字作为文件名称,这样就可以避免上面的出错现象。

 5 、巧妙设置字体分辨率 

   我们在制作网页的时候,经常有这种体会,那就是制作好的网页在本地计算机上浏览时很正常,但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了,这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示,在 Dreamweaver 中得到了较好的解决。在文档窗口的右下角, Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字,在弹出式菜单中可以为当前的页面指定显示分辨率,通过修改可以使你的主页更具灵活性。使不同分辨率的显示器都能较好地显示。 

6 、巧妙隐藏标签 

   如果在网页中插入了不可见的元素时, Dreamweaver 会自动在页面上添加一个与之相应的元素标签,以便于我们选择不可见元素。但这并不全是件好事,比如我们在一个有很多层的页面中的第一行便插入一个表格,就会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第二行,虽然在浏览时并不影响效果,但这确确实实会阻碍我们的工作。所以当我们觉得某个元素标签碍手碍脚时,就索性将之屏蔽掉。方法是按 Ctrl+U 打开 Preferences 面板,在 Category 中选中 Invisibel Elements ,在面板的右边将会出现所有的元素标签。只要将不需要的元素标签前的勾去掉,以后它就保证不会再出现了。 

7 、善用拖放技巧 

   我们在使用 Dreamweaver 编辑网页的时候,经常需要插入一些图象什么的,假设要插入的图象很多,按照常规方法来操作就显得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把 Dreamweaver 的操作窗口变成活动窗口,以腾出空间来显示 Explorer 窗口,找到要插入的图象文件后,把它们一一用鼠标拖动到网页的适当部位, Dreamweaver 将自动把这些图象的 url 添加到文件的 HTML 代码中,当然这里要求被拖动的图象文件必须是 gif 、 jpg 等 web 图象格式的文件。对于已经在网页中的图象也是一样,直接拖过来就可以了。但如果被拖动的图象上有超级链接,就不可以再使用拖动技术了,因为那时拖过来的仅仅是超级链接地址。 

8 、自动设置更新时间 

   我们知道一个网页要想获得更多的回头率,一个很重要的一条就是要不断更新。但对于我们这些个人网页来说,要天天及时更新恐怕不是很容易的事情。因此,我们希望网页能自动更新,下面笔者就提供一个能自动更新修改时间的源代码,我们只要把这段源代码添加到 …< /BODY> 之间就能实现更新时间的目的了: 
< Script Language="javascript"> < /style> ;二是用鼠标依次单击 Dreamweaver 中的 Text/Custom Style/Edit/Style Sheet/New/Redefine HTML Tag ,并从中选择 a ,然后在 decoration 中选中 none ,最后单击确定就成功了。 

12 、巧妙复制文字 

   在几个不同的应用程序中间相互复制文字,是我们在实际工作中可能要常做的事情。但是,如果我们从 Dreamweaver 中复制编辑区中的文字到另外一个应用程序的时候, HTML 代码和文字将一起被复制过去了,那么我们该如何才能只把编辑区中的文字复制下来呢?我们知道,通常复制时都用快捷键 Ctrl - C 来操作,如果我们在复制的时候多按一个 C 键,那么 Dreamweaver 将只会复制选中的文字了。

13 、善用快捷键 

   为了提高操作的效率,我们可以在 Dreamweaver 中使用快捷键,例如使用 Ctrl-B 或 Ctrl-I 来为文字应用黑体或斜体格式,也可以使用以下一些键盘快捷键来为选中的文本应用 HTML 格式: Ctrl-0: 无格式  Ctrl-T: 段落  Ctrl-1: 标题 1 Ctrl-2: 标题 2 Ctrl-3: 标题 3 Ctrl-4: 标题 4 Ctrl-5: 标题 5 Ctrl-6: 标题 6 

14 、自动关闭网页 

   如果我们希望自己的网页在指定的时间内能自动关闭,不妨在网页源代码中的标签后面加入如下代码: < script LANGUAGE="javascript"> < /script> 
其中代码中的 3000 表示 3 秒钟,它是以毫秒为单位的。 

15 、巧妙设置对象名称 

   我们在用 Dreamweaver 来制作非常复杂的效果时,有可能需要经常重复地使用某一个或者多个对象,例如我们经常需要定位某个特定的表格、图象等,如果我们没有给某一个网页中的多个对象取名的话,那么在重复应用这些对象的时候,可能很麻烦或者容易出错。为了能够方便调用这些对象,我们应该在每创建一个新的对象时,都记得给它取一个有代表性而且比较容易记忆的名称。在给这些对象命名时,我们可以通过对象的 “ 属性 ” 面板来操作就行了。 

16 、为图象链接增加动态效果 

   有时我们为了要达到一种逼真的效果,希望鼠标移动到某个链接上时能有动感产生。使用 Dreamweaver 可以很容易实现这种效果。设计时,我们首先需要准备两幅图象,第一幅是原始图象,第二幅是鼠标移动上去后的图象。接着用鼠标单击第一幅图,在属性面板中的链接栏中填上要链接的文件,然后单击键盘上的 F8 键,在弹出的 Behaviors 窗口中单击 “+” 号,随后选择 “swap image” ,在接着出现的窗口中选择第二幅图象,最后单击确定就可以了。  
 
文章出处: eNet 硅谷动力 

Q:: 修改HTML,给网页加点花样。
A:摘自 ---[ 网页制作学习园地 ]

 说到制作主页大家一定会想到用 Frontpage2000 、 Dreamweaver 等专用制作软件,但现在笔者要向大家介绍的是用修改 HTML 源代码的方法,来给主页添加点小 “ 点心 ” ,把你的 “ 网上小屋 ” 装扮得再漂亮一点。下面请看第一道 “ 点心 ” 是什么 ……



1. 浮动背景图像
   当你拉住滚动条把页面向下拉动时,背景图像也跟着一起移动,这样就会导致浏览速度降慢。我们可以在 <body> 语句中加入如下属性,就能产生主页内容向下滚动而背景图像不动的效果。
<body backgroud=″image.jpg″ bgproperties=″fixed″>
   其中 image.jpg 就是你主页里的背景图像。



2. 使你的主页自动被搜索引擎收录
   你一定为了让你的网站名扬天下而去各个搜索引擎注册吧?在网上有很多机器人,它们自动搜寻关键字,你只要在网站上设立这样的关键字,就有可能被它们找到。
<head><meta http - equiv=″keywords″ content=″yancheng,science,technolodgy,information,network,politics,economic″ ; charset=gb2312></head>
   其中 CONTENT 这个属性主要让你放置一些你主页里的关键词,而且这些关键词最好容易使人想到。



3. 提前下载图片
   当你要访问一个内含很多图片的网页时,通常访问速度很慢;但我们可以在打开当前网页时提前下载下一页图片,以便能够提高浏览速度。要实现这个效果,我们可以在 <body>......</body> 语句中加入以下一行:
<img src=″image.jpg″ width=0 height=0>
   其中 image.jpg 就是你想要提前下载的图像名。



4. 给某个链接添加说明信息
   有些主页,当你把鼠标指向某个链接后,在状态栏会出现该链接的具体说明信息,是不是很方便呢?其实,我们只要在网页里的链接语句中加入以下的 HTML 代码,就可以实现这个功能了!
<HTML>
<HEAD>
<TITLE> 举例说明 </TITLE>
</HEAD><BODY><A HREF=″[img]http://www.laolang.net/images/url.gif[/img][URL=http://www.g168.net/][COLOR=#0000ff]http://www.g168.net[/COLOR][/URL]″ onmouseOver=″window.status=′ 网页制作学习园地 ′;return true;″ onMouseOut=″window.status=′′;″>
</BODY></HTML>



5. 使网页自动定时刷新
   你可以添加如下 HTML 代码来实现这个要求,请在 <head> 和 </head> 语句中加入:
<META HTTP - EQUIV=″Refresh″ content=″10;url= 你想访问的网址 ″>
   其中 10 代表当前网页完全下载完成 10 秒后自动链接到指定的 URL ,把 URL 去掉就表示每隔 10 秒自动刷新一次主页。

Q:: 用 FrontPage 2000 快速制作动态按钮 。
A: 原文转载自 eniac 版 may202 的《用 FrontPage 2000 快速制作动态按钮》
           用 FrontPage 2000 快速制作动态按钮 

     [img]http://www.laolang.net/images/url.gif[/img][URL=http://www.sina.com.cn/][COLOR=#0000ff]http://www.sina.com.cn[/COLOR][/URL] 2002/09/06 13:42 赛迪网 -- 视窗世界 
 
   文 / 杨浩

   你一定看到过很多网页上的动态按钮效果,一般而言实现它需要后台的 javascript( 或 VBScript) 网页脚本语言支持,对于只懂使用初级的 “ 所见即所得 ” 网页编辑器的人来说确实是个难题。现在我们就来学一学制作动态按钮的 “ 傻瓜式 ” 方法。我们以制作一个中英文切换的按钮为例。

   其实,动态按钮的实现原理都是一样的,首先制作按钮的图片,然后通过脚本语言捕 
获鼠标在按钮上的事件,对事件做出交换图片的响应。在 Frontpage 2000 里有交换图片的现成语言包。

   首先在 Photoshop 或 Firework 里制作两张用于交换的按钮图片,大小均为:宽度 80 象素;高度 15 象素,并在其中输入按钮的文字,注意两张图片文字的相对位子应基本一致。

   在 Frontpage 中插入一个表格,大小与按钮图片的大小相同 ( 宽 80 象素,高 15 象素 ) ,点击插入图片按钮,在表格内插入初始化显示的按钮图片,即按钮在未进行动态变换时显示的那张图片,在这个例子中我们选择有 “English Button” 字样的图片为初始图片。接下来我们就开始为它做动态效果。选择菜单 “ 格式 ”-“ 动态 HTML 效果 ” ,出现动态 HTML 效果的对话框。确保要做动态变换的图片为选中状态的前提下,在 DHTL 效果多话框内将 “ 开启 ” 选项选择为 “ 鼠标悬停 ” ;应用选择为 “ 交换图片 ” ;并在下面一个选项内指定路径为用于交换的 “ 中文按钮 ” 图片所在的路径。

   好了,一个动态按钮效果的 “ 傻瓜 ” 式制作方法完成了。网页保存后会有一个名为 animate.js 的脚本文件,你可以通过记事本打开它,这里面的就是有 Frontpage 自动生成的脚本语言包。动态按钮效果在 Frontpage 里可以轻松的实现,你也可以改变用于交互的两张图片按照你的需要制作,注意在制作按钮图片时一定要设置两张图片的大小完全一致。


[/TD][/TR][/TABLE]

[/TD][/TR][/TD][/TR]
页: [1]
查看完整版本: 网页设计中常用的一些技巧
baidu
互联网 www.ymxd.net