★［网页制作技巧］基础知识类★ 电脑家园帖子浏览交流论坛育星幼教网（幼儿园教师之家）：幼儿教育-儿童教育-学前教育

交流论坛 - 特别服务区 - 电脑家园 - 帖子浏览 - ★［网页制作技巧］基础知识类★

您是本贴第 2487 位浏览者

帖子浏览: ★［网页制作技巧］基础知识类★

傷心宝宝

等级: VIP用户

发贴: 796 贴
货币: 349 金币
积分: 1955 分
经验: 0 点
体力: 200 点
注册: 2004-09-09

★［网页制作技巧］基础知识类★

目录

1.消除用Netscape编制的网页中的乱码

2.如何改变字的颜色

3.设置网页的背景图像

4.如何去掉主页超链接的下划线

5.DreamWeaver中如何防止出现重叠现象

6.中文网页制作中段落缩进的方法

7.如何调整表格高度

8.超级链接时如何设定目标窗口

9.如何实现文字的自动换行

10.如何制作HTML字幕动画效果

11.灵活运用DREAMWEAVER的SITE功能

12.如何弹出公告窗口

13.如何让背景图象不滚动

14.如何为网页设置背景音乐

15.实现有立体感的表格边框

16.定制站点导航条

17.DM查找替换的技巧(一)

18.DM查找替换的技巧(二)

19.鼠标移过链接时实现特定响应

20.显示日期和跳动的时间

21.页面滚动显示

22.自动显示最后更新时间

23.跑马灯大全(一)

24.跑马灯大全(二)

25.为主页定义热键

26.超链“确认”对话框

27.简单的鼠标跟随

28.调查信息以Email形式发送

[本贴已被作者于 2004年11月12日 22时43分59秒编辑过]

人回来类~

2004-11-12 21:50:50

傷心宝宝

等级: VIP用户

发贴: 796 贴
货币: 349 金币
积分: 1955 分
经验: 0 点
体力: 200 点
注册: 2004-09-09

回复：★［网页制作技巧］基础知识类★（整理中。。。）

正文

1.消除用Netscape编制的网页中的乱码
　平时当我们用IE浏览浏览器来浏览，一些网页的时候，往往会发现有的汉字网页中出现乱码，好端端的一个页面却无法辨认。真是烦人那。干脆不看了。出现这种情况是网页制作者最为痛心的事情。如何防止出现这种情况呢？我们下面就来谈谈这个问题。

　　很多的网页制作者通过Netscape Navigator内置的网页编辑器来编辑中文网页，其中出现的所谓乱码实际上是一种流行于Internet上的汉字(HZ)内码。对于Netscape Navigator，所默认的网页内码为HZ码。比如“＆middot;＆snp2 ＆Ecirc;＆Ccedil,＆Vacnte;＆maer;”就是一堆HZ码。当一页html文件由Netscape Navigator编制完成时，如果不加上特殊的注解命令，那么该html文件内的所有汉字字符就会被Netscape Navigator转换成HZ码。

然而目前在用户端经常使用的浏览器有很多种，包括Internet Explorer，Netscape，Opera等。用户在使用非Netscape浏览器进行阅读时，这些HZ码便会照原样显示在屏幕上，形成“汉字乱码”

　　解决这一问题的方法其实很简单，我们只须在网页的源文件的<head>栏内加入下面的命令：

　　<META HTTP－EQUIV=“Content－Type”CONTENT=“text/html;
　　　 charset=gb2312”>

　　其中“charset”的参数是起关键作用的地方。对于用BIG5码制作的中文网页，则应改为“charset=big5”。

依照上面的作法进行设置后，我们再用Internet Explorer或Opera来浏览，发现汉字显示正常了。

2.如何改变字的颜色
　　在有些网页我们可以看到，当MOUSE移上去是一种颜色，移开就是另外一种颜色，这是怎么样实现的呢？这里我们就来看一看。

　　这里我们只需要在Head内预先定义两个类，分别定义了两种颜色，这在后面的HTML源文件中会用到这个颜色的定义:

　　<style>
　　　.normal {color:red;}
　　　.start {color:blue;}
　　</style>

　　然后我们在要改变的字前后加上下面的代码:

　　<SPAN onmouseover = "this.className = 'normal'"　
　　　onmouseout = "this.className='start'" class=start> here </SPAN>

　　这里的“class=start”是将这行字的默认值设为 start {color:blue;},要是不加上这句的话，你这行字的颜色就会变成HTML预先设定的数值。

　　下面我们看一看效果。当我们把鼠标移动到“here”上的时候，颜色为“normal”定义的颜色，而当鼠标移开的时候“here”的颜色为“start”定义的颜色。

　　(注意这种效果只有在Internet Explorer下才可以看到）

3.设置网页的背景图像
　　网页的背景色和背景图选择得好，会是页面增色不少。如果选取单一的背景色，难免显得单调，如果选择整个图片做背景，由于图片本身的文件大，造成网页的加载时间长，一般用户很难有耐性等待下去。那么带背景的网页是如何制作出来的？

　　很简单，一般是采用一幅很小的图片，然后铺展开，形成很漂亮的背景。对背景图的要求当然是越漂亮越好，文件越小越好。这里我们不谈论图片的制作了。

　　当你有了一幅可以自然拼接的图像后，在Dreamweaver中，我们可以设置background图片。

　　打开源文件我们可以看到〈BODY〉标签中多了一串代码。代码的表达式如下：

　　<BODY BACKGROUND="images/back001.gif" BGCOLOR="#FFFFFF" >

　　这里的images/back001.gif就是BACKGROUND的值，其图像文件名为一个URL。当然我们可以在源代码中直接加入上面的代码。

　　下面是一个小例子。假如我们有了一幅适合做背景的小图，文件为back001.gif，下面就可以重新编写HTML代码了。

　　<HTML>
　　　<HEAD>
　　　　　<TITLE>搜依</TITLE>
　　　</HEAD>
　　　<BODY BACKGROUND="images/back001.gif" BGCOLOR="#FFFFFF">
　　　　　<P><FONT FACE="Arial" SIZE="5" COLOR="#0000ff">搜依·体验幽郁论坛</FONT></P>
　　　</BODY>
　　</HTML>

4.如何去掉主页超链接的下划线
　　在访问一个页面的时候，我们会发现，当鼠标移动到具有超级连接的文字上的时候，有的会产生相应的下划线。然而有些网页却没有。主页超链接的下划线是如何去掉的呢？

　　我们在<HEAD>...</HEAD>之间插入下面的代码。

　　<style>B {font-weight: 700; }
　　　P {padding: 5px 0px;
　　　　 margin: 0px;
　　　　 font-family: 宋体,黑体,宋体;
　　　　}
　　　A {text-decoration: none}
　　　TD { font-family: 宋体,黑体,宋体; }
　　</style>
　　<script language="javascript">
　　　var contents = true;
　　</script>

　　更简单的方法是：

　　　<style>
　　　 <!--
　　　　　a {text-decoration:none}
　　　　　a:hover {color: red;text-decoration:none}
　　　 --!>
　　　</style>

　　下面我们在看一看效果，试着将鼠标移动到下面的超级链接上去，是不是超级链接不会产生下划线了。

5.DreamWeaver中如何防止出现重叠现象
　　文字和图像混排，可以为我们的页面增加色彩和活力。当然这是在文字和图像搭配得比较得当和得体的前提下。然而有的文字和图像的排列却往往不尽人意。有时我们发现利用Dreamweaver制作的页面在Internet Explorer中看很漂亮，图形定位也很准确，但是当你使用Netscape或其它的浏览器时，发现图形位置错位或者覆盖文字，这大大影响了网页的效果。

　　如何控制这种情况的发生呢？这里我们就来谈一谈如何利用Dreamweaver来实现图文的混排。

　　其实出现上面的情况的原因很简单，Internet Explorer和Dreamweaver同属于微软的产品，它们之间有比较好的兼容性，相互之间能够形成“对话”。然而Netscape却不能“理解其中的意思“，因此采用这两种不同的浏览器会出现不同的效果。

　　那么怎样改变上面出现的不正常的情况呢？很简单，我们查看以下源程序，发现上面一段的源程序是这样的：

　　<span class="p2" style="line-height:17pt">
　　　　<p align="left">
　　　　下面是这段代码产生的显示效果：</p>
　　　　<p align="center"><img src="img/ol04006.gif" width="425"
　　　　　　　　　height="97"></p>
　　　　<p align="left">　　怎么样？如果你选择的背景图片质量很高的话，背景会更漂亮的。</p>
　　</span>

　　在上面的源代码中，我们发现代码对图像做了行间距的设置，我们只要将图片的行间距去除掉，就可以了。下面是变更后的代码：

　　<span class="p2" style="line-height:17pt"><p align="left">
　　　　下面是这段代码产生的显示效果：</p></span>
　　<p align="center"><img src="img/ol04006.gif" width="425"
　　　　　　　　　height="97"></p>
　　<span class="p2" style="line-height:17pt"><p align="left">
　　　怎么样？如果你选择的背景图片质量很高的话，背景会更漂亮的。
　　　　</p></span>

　　另外我们也可以利用表格进行图形的定位，也不失为一种好方法，但是也可能会出现其他的问题。这一点我们会在其他的技巧中讨论。

6.中文网页制作中段落缩进的方法
　　在利用Dreamweaver制作有关文档资料内容的网页时，如果是英文书写格式，段落一般不缩进（不支持半角空格）；如果需要缩进往往需要人为的加入两个中文全角空格，才能够显示出位置缩进效果。

　　除了上面所说的外，还有下面几种方法，可以值得一试，现介绍如下。 -

　　1.预格式(PRE)

　　用预格式编写的源文件，在显示时照源文件中的排版字样显示，空行和空格都能很清楚地区别开来。如源文件为：　　

　　<pre>
　　－－预格式显示……
　　</pre>

　　网页就会按照你预先设置好的显示方式显示，即在“预格式显示”的前面就会空两个汉字的位置。

　　2.插入点图或图形

　　点图是指图片中只有一个或几个像素点，用肉眼看不出来。当我们在段落开头插入这样一个点图，并用HSPACE和VSPACE属性来调整点图的左右和上下的空格，以达到段落缩进。

　　同样可以插入图形，只不过该图形的颜色需要用网页背景色，这种方式用IMG的WIDTH和HEIGHT属性调整图形大小，以达到缩进。

　　插入图形的方法，需要我们掌握好HSPACE和VSPACE大小的尺度，使之刚好留出两个汉字的位置，这样才比较美观。

　　3.插入没有边框和内容的表格

　　这种方式与上述的插入图形方式类似，该表格没有边框和内容，是空表格。用TABLE的WIDTH和HEIGHT属性调整表格大小适合缩进的需要。

　　利用表格来定位一般来说比较可靠，我常常就采用这种方式来对比较复杂的页面进行定位。不过这种方法有一个问题，就是可能是页面的源文件变大。因此也不见得是格式控制的首选。

　　4.插入特殊的空格字符“＆nbsp”

　　“＆nbsp”代表非显示空格字符。插入若干个“＆nbsp”字符，中间用分号(；)或者空格隔开，也可以实现中文段落缩进。不过在Netscape 3.01中只能写小写字母，而在IE中大小写都可以。

　　这四种方法主要是针对利用HTML的语言编写网页而言。在一些网页制作工具，如网景浏览器中有专门加入空格的工具条，也可以完成段落缩进。

7.如何调整表格高度
　　我们在使用Dreamweaver制作主页时候往往需要改变表格的高度。然而有时当我们拖动表格的边框，无论怎样拖动，等到放下鼠标，表格却又恢复到原来的样子。试着拖动表格的边框看看。

　　出现这种情况的原因在于我们已经为表格提供了一个固定的高度，当我们要改变表格的高度，尤其是压缩表格的时候，表格的高度仍然保持原来的设定值，其直观表象就是无论你怎样拖动表格的边框，表格的高度都不变化。

　　在这种情况下，我们只需要去处掉表格高度的设定，然后拖动表格的边框就可以了。

　　如何去除表格的高度设置呢？首先我们需要选定表格。比较简单的方法是，将光标移动到表格内，然后按“ctrl+a”，看看，不是就选中了与包含光标所在位置的最小的表格了吗。

　　选定了表格以后，在properties框（属性框）中点击一下“clear row heights”图标（下图中带红框的按钮），表格的高度设定值就被取消了。这时表格的高度会按照表格的内容自动的匹配高度。

当然删除表格高度的方法，不只有上面的一种方法，我们也可以选中表格，在表格的属性框中直接删除掉表格的height值就可以了。

　　同样的，该方法也适用于改变表格的宽度的情况，只不过，选定了表格以后，删除的不是行的高度，而是列的宽度。

人回来类~

2004-11-12 21:54:33

傷心宝宝

等级: VIP用户

发贴: 796 贴
货币: 349 金币
积分: 1955 分
经验: 0 点
体力: 200 点
注册: 2004-09-09

回复：★［网页制作技巧］基础知识类★（整理中。。。）

8.超级链接时如何设定目标窗口
　　目标窗口是页面链接所指内容显示的窗口，也就是当你单击了页面某一个链接后，该链接所指的内容在那个窗口显示。大多数榭鱿拢颐俏扌韫匦乃蛭话愣际窃谕淮翱谙允尽５怯惺蔽颐切枰鲆桓鲂碌拇翱冢皇翘娲吹拇翱冢趺窗炷兀亢芗虻ィ饫镂颐侵灰诔读唇拥脑创雝arget属性就可以了。

　　下面我们就看一看TARGET属性：TARGET是链接标签的属性，它的作用就是指定目标窗口，TARGET有以下几个值：

　　_self --将链接指向的内容装载到当前页的窗口或框架中；

　　_top --完全取代当前页面的所有框架；

　　_blank --为链接指向的内容打开一个新的窗口

　　_parent --把链接指向的内容装入当前页〈FRAMESET〉父窗口中

　　下面这段代码，便会使超级链接产生一个新的窗口：

　　<a href="http://www.soyee.net" target="_blank">搜依</a>

9.如何实现文字的自动换行
　　我们在编制主页的时候，有时候会发现自己制作的主页不能够自动折行（往往是在IE中能够自动折行，而在Netscape中不能），尤其是对一大段文字，必须拖动窗口的滑块跑很久才能看完后面的文字。很是费劲，对不对。如果这样的页面在网络上发布的话，肯定不会受到欢迎的。

　　如何消除这种情况呢？这里我们介绍用表格来定位的方法：

　　我们认为很有效的方法就是采用表格来对文字进行定位。当然这里的表格我们一定要给定它的绝对宽度（直接给定或间接给定宽度），那么输入的长文字便会自动的换行了。

　　这里所说的直接给定表格的宽度，是指我们直接设定表格的width属性值为某一个设定值。如我们可以如下设定：

　　[color=Black]<table width="420">...</table>

　　相对值是指采用相对于上一级表格的宽度，通常用一个百分数来表示。比如我们在一个相对外层的表格中设定了表格的宽度，那么在内层的表格中只要给出一个相对的宽度就相当于已经给定了表格绝对宽度。我们可以看看下面的源代码：

　　[color=White]<table width="760">
　　　　...
　　　　<table width="60%">
　　　　　　...
　　　　</table>
　　</table> 　　这里就相当于我们已经给定了内层表格的宽度为760*60%=456个像素点了。

　　如果你有兴趣，可以尝试着试一试。

10　如何制作HTML字幕动画效果
　　我们在浏览网页的时候，有时会看到网页中有些文字会循环往复的移动。这种动画效果是如何制作的呢？这里我们就来看一看。

　　当然我们可以利用flash或者采用Gif动画来实现，但是这种方式往往占用的空间比较大，而且不如HTML标记来得那么简单。这个标记就是Marquee标记，中文翻译为“跑马灯”。IE3.0以上版本的浏览器中支持这个HTML标记，而NetScape则不支持。因此我们在设计网页的时候需要考虑这个问题。

　　Marquee标记的基本语法结构如下所示：
　　<MARQUEE ALIGN=″alignment″ BEHAVIOR=″type″ BGCOLOR=″color″ DIRECTI ON=″direction″ SCROLLAMOUNT=″n″ SCROLLDELAY=″n″ LOOP=″n″ WIDTH=″x″ HEIGHT=″y″ HSPACE=″x″ VSPACE=″y″>欢迎光临搜依·体验忧郁</MARQUEE>
　　其中ALIGN可以用来指定滚动字幕与左右文字的对齐方式，它的值可以有top、middle、bottom等；

　　BEHAVIOR用来指定滚动字幕的滚动方式，它的属性值有scroll、slide和alternate三个，scroll表示滚动字幕内容向同一方向重复滚动，slide表示滚动字幕内容从一端向另一端滚动并在另一端停止，alternate表示滚动字幕内容在两端之间来回往复滚动；

　　DIRECTION指定滚动字幕的滚动方向，它的属性值有left和right两个，分别表示滚动字幕由右向左和由左向右滚动；SCROLLAMOUNT用来设置多次滚动之间的间隔距离，其单位是pixels（像素）；

　　SCROLLING用来指定滚动字幕滚动一次所需要的时间，单位是ms（千分之一秒），其值的大小将直接影响滚动字幕的滚动速度；

　　LOOP属性是用来指定滚动字幕的滚动次数的，当它的值为“－1”时，滚动字幕将连续滚动直到浏览器载入下一个页面；

　　HSPACE和 VSPACE则分别用来指定滚动字幕与其上一级页面在水平方向和竖直方向上的距离。

　　(注意：这种跑马灯的效果只在Internet Explorer中能看到，Netscape不支持marquee标记）

人回来类~

2004-11-12 22:00:07

傷心宝宝

等级: VIP用户

发贴: 796 贴
货币: 349 金币
积分: 1955 分
经验: 0 点
体力: 200 点
注册: 2004-09-09

回复：★［网页制作技巧］基础知识类★（整理中。。。）

11　灵活运用DREAMWEAVER的SITE功能
　　在DREAMWEAVER中，有一个SITE菜单，利用它可以实现对网站设计阶段的管理。有了它，可以大大减少在网站开发阶段的维护工作量。下面我们具体看看它的一些功能：

一、利用Site更改文件名

　　在制作网站的过程中往往需要更改文件名，但是，这些文件名可能是某些超级连接所链接的对象。如果我们按照常规的方法去更改文件名，不仅工作量大，而且有可能由于工作的疏忽而造成某些链接找不到相应的链接对象，从而影响到网站的形象。利用dreamweaver的site功能可以大大简化这一工作。

　　点击site菜单下的open site命令，选择要打开的site名。这里我们选择hongen site。这时dreamweaver便会弹出一个site的操作窗口，如要将jiqiao001.html改为jiqiao003.html，我们便选中jiqiao001.html文件，然后按F2键，遍可以为jiqiao001.html更名，输入新的文件名后，dreamweaver会弹出一个对话框如图所示：

提示是否需要对整个site文件进行更新(update)，选择yes，系统便会自动的更改与该文件相关的所有链接。

二、利用site查找链接错误和检查浏览器支持程度

　　在开发建设网站的过程中，如果我们的页面越来越多，则链接出错的可能性会很大，单凭我们人力去检查这些链接显然是特别麻烦的，而且有些隐蔽的链接我们也不会一一点击，有没有自动检查链接错误的功能呢？其实Dreamwaver为我们提供了一个很好的链接检查器，让它帮我们检查不但速度快而且准确，为何不试一试呢？

　　点击“File”菜单下“Check Links”项(快捷键为Shift+F8),Dreamwaver便开始检查鼻癝ite下的所有连接，如果发现了链接的错误则会在弹出的“Link Checker”对话框中列出链接错误所在的页面，接下来我们要做的只是记下出错页面，然后打开页面修改错误，既快又方便。

由于我们制作的网页上传后，并不能知道网友使用何种浏览器，而我们应用在网页制作中的有些技巧，并不是所有的浏览器都能支持的，也就是说别人也许看不到网页应有的效果，甚至是一团糟，所以我们必须保证自己的网页被主流的浏览器所支持。Dreamwaver提供了这样一个功能，即检查目标浏览器，我们在Site中选中要测试的文件，然后在“File”菜单中找到“Check Target browser”并单击，这时会弹出一个对话框。

我们一般选择“IE 4.0”和“Netscape4.0”检查即可，如果检查结果发现有浏览器不支持的地方，我们在测试结果窗口中能够看到是哪个语句有问题，我们只须做相应的修改即可。

12.如何弹出公告窗口
　　有时我们需要采用公告窗口来展示一些重要的信息，所谓公告窗口是指我们浏览主页时，随主页面的加载而自动弹出的小窗口，公告窗口中一般会放上新闻、布告的信息。下面我们看看怎样用几句简单的JavaScript语句来实现它。

方法一：
在<head></head>之间插入如下一段JavaScript代码：

<script language="JavaScript">

</script>

方法二：
直接在<body>与</body>插入如下一段代码：

<script language="JavaScript">
window.open("test.htm","测试公告窗口","width=340,height=163,toolbar=0,status=0,menubar=0,resize=0");
</script>

　　方法是直接在<head>与</head>之间插入一段JavaScript代码(你可以选择上面两段之一，它们的作用是相同的)，其中windows.open()的作用是打开一个窗口，括号内的各项参数的用法我们可以在下面表格中看到，我们可以根据自己的需要设置各个参数的值。

窗口参数                               参数介绍
toolbar=yes,no                      是否显示工具条
location=yes,no                     是否显示网址栏
directories=yes,no                 是否显示导航条
status=yes,no                       是否显示状态条
menubar=yes,no                   是否显示菜单
scrollbars=yes,no                  是否显示滚动条
resizable=yes,no                  是否可以改变公告窗口大小
copyhistory=yes,no              是否显示历史按钮
width=300                            公告窗口的宽
height=200                           公告窗口的高
left=100                                公告窗口的左上顶点距屏幕左边100像素
top=100                                公告窗口的左上顶点距屏幕顶端100像素

人回来类~

2004-11-12 22:10:35

傷心宝宝

等级: VIP用户

发贴: 796 贴
货币: 349 金币
积分: 1955 分
经验: 0 点
体力: 200 点
注册: 2004-09-09

回复：★［网页制作技巧］基础知识类★（整理中。。。）

13.如何让背景图象不滚动
　　前面我们讲过往页面添加图形背景的方法，但是这种背景会与页面一道移动。如何让页面内容翻动使而背景图像固定不动呢？

　　HTML也给出了这样的代码，只是不经常用而已。我们只需要将body的bgproperties属性设置为“fixed（固定）”。

　　在Dreamweaver中“Text”菜单下，选择“CSS Styles”子菜单，然后选择“Edit Style Sheet”命令（快捷键为：ctrl+shft+E），弹出如下的窗口：

(图片因XX原因，暂时无法上传）

点击“New”弹出对话框

选中“Redefine HTML”选项，将Tag选择为“Body”，点击“OK”

在Background中的Attachment里选“fixed”，背景图片选择为待设定的图片，点击OK以后就可以了。

14.如何为网页设置背景音乐
　　往网页中插入背景音乐会使页面声色不少。但是在使用音乐背景的时候要注意，背景音乐不能太大，否则文件传输会成问题，从而使网页的吸引力下降。

　　在HTML中有embed标签可以实现背景音乐的插入功能，其语法规则如下：

<EMBED src="music.mid" autostart="bool" loop="n" width="m" height="k" >

下表给出有关上面的语法的一些具体的值和含义：

src 音                   乐文件的路径及文件名；
autostart true              为音乐文件上传完后自动开始播放，默认为false（否）
loop true                      为无限次重播，false为不重播，某一具体值（整数）为重播多少次
volume                         取值范围为"0-100"，设置音量，默认为系统本身的音量
starttime                      "分：秒"，设置歌曲开始播放的时间，如，starttime="00:10"，从第10开始播放
endtime                       "分：秒"，设置歌曲结束播放的时间
width                           控制面板的宽
height                          控制面板的高
controls                       控制面板的外观controls="console/smallconsole/playbutton/ pausebutton/stopbutton/volumelever" ·console 正常大小的面板
          ·smallconsole            较小的面板
          ·playbutton              显示播放按钮
          ·pausebutton           显示暂停按钮
          ·stopbutton              显示停止按钮
          ·volumelever            显示音量调节按钮

hidden                        为true时可以隐藏面板

人回来类~

2004-11-12 22:21:17

傷心宝宝

等级: VIP用户

发贴: 796 贴
货币: 349 金币
积分: 1955 分
经验: 0 点
体力: 200 点
注册: 2004-09-09

回复：★［网页制作技巧］基础知识类★（整理中。。。）

15.实现有立体感的表格边框
　　如果你用Dreamwaver实现起来十分简单：

　　<1>我们先来插入一个表单：选择“Insert”－>“Table”，在弹出的对话框中设置为7行1列，设置宽度为125 Pixels，然后点击确定；

<2>选择“Windows”菜单，点击“Properties”项，“调出“Properties(属性)”窗口；

　　<3>将鼠标在刚才插入的表格中点一下，然后按下“Ctrl+A”,选中整个表格，这时属性框中显示的是表格的属性；

　　<4>修改表格属性如下图：
　　把“CellPad”设为1，“CellSpace”设为0，边框宽度“Border”设为1，将亮边框“Light Brdr”设为较深的颜色(比背景色要深)，将暗边框“Dark Brdr”设为白色，最后设置背景色为“#FF66CC”以完成设置。

（图片暂时无法上传）

经过这样的一番设置，便出现了带有立体感的表格(使用Netscape浏览器可能没有此种效果)。如果你喜欢手写代码，那你把表格的属性做相应修改即可。此表格的源代码如下：

16.定制站点导航条
　　以Dreamwaver为例点击“Insert”菜单->“Form Object”，选择“List/Menu”并单击，这时在编辑的网页上便插入一个组件，你也可在“Object”对话框中找到这个组件。如图所示：

（图片暂时无法上传）

下面我们对“List/Menu”组件的属性作如下设置：

　　<1>打开“Properties”对话框，选择“Type”值为“List(下拉列表)”，然后点击“List Values...”按钮进入添加条目的对话框；

<2>在“List Values”对话框中输入站点导航的各个条目；其中左边是站点的名称，右面为站点对应的链接，我们根据自己的实际情况添入各条目的值，这里我们把第一项填为“我的站点导航”，并把“Value”值设为当前页，也就是本页，这一个条目是做默认显示用的，点击“OK”确定；

<3>这时属性对话框中显示出了我们刚才添入的条目，我们点击选中第一项“我的站点导航”作为默认的显示项，然后在上图所示的属性框中设置“List/Menu”的名字为“select”(如果一个网页中有多个组件则命名应加以区分)；

<4>在代码中找到刚才加入的“Select”所对应的语句，然后在图示位置添加一个“onChange”语句，这句话的作用是当我们在站点导航中选择某一站点时，即触发“onChange”事件时调用第5步中我们插入的“change”函数；

<5>最后一步是在网页中的<HEAD>中插入如下这样一段JavaScrip语句，其中第四行的“var url=""”，我们设为空值，而在你将网页上传到服务器时最好把空值改为服务器的地址，以免发生意外错误。

　　源码：

1.在“select”标签中添加一个“onChange”语句

<select name="select" onChange="change(this.form)" size="1">
<option value="pm016.htm" selected>我的站点导航</option>
<option value="pm015.htm">编程技巧</option>
<option value="pm014.htm">闪电空间</option>
<option value="pm013.htm">网上学习</option>
<option value="pm016.htm#1">真情无限</option>
<option value="pm016.htm#1">笑话乐园</option>
</select>

2.在网页中的<HEAD>中插入如下这样一段JavaScrip语句:

<script language="Javascript" src="/pub/js/head.js"></script>
<script language="javascript">

</script>

到这里我们就定制好了自己的“站点导航条”，如果你使用Frontpage做网页，你可以在“插入”->“表单”->“下拉列表”中实现同样的效果。最后顺便提一下“站点导航条”的定位问题，从组件框中插入的组件经常出现放不到我们想要的位置的情况，而对这些组件的定位，我们一般采用表格来实现。如果你对表格定位的使用还不熟悉的话，请看下个技巧的内容---表格定位技巧。

人回来类~

2004-11-12 22:29:06

傷心宝宝

等级: VIP用户

发贴: 796 贴
货币: 349 金币
积分: 1955 分
经验: 0 点
体力: 200 点
注册: 2004-09-09

回复：★［网页制作技巧］基础知识类★（整理中。。。）

17.DM查找替换的技巧(一)
　　　在开发建设网站的过程中，也许我们会遇到这样的情况，当我们的网站已经进行了相当部分，但是发现还需要对某些细节进行修改。这时候不可能完全的依靠手工去更改了，怎么办呢？利用Dreamwaver中查找替换也许能够帮助实现这些功能。

　　Dreamwaver的查找替换功能十分强大，它的查找替换对话框中甚至可以用精确的“查询语言”来控制查找过程。我们在Dreamwaver中调出“查找对话框”的快捷键是Ctrl+H,默认形式的查找对话框如下图所示：

如图所示各个输入框的作用是：最上面的“Find”指查找的范围，在它的选择中有三项，第一项是在当前文件内查找，第二项指在当前的Site中查找，第三项是在指定文件夹中查找，如果我们选中了此项就要点击右面的文件夹状按钮指定文件夹；下面的“Find”中我们选择查找的类型，如果选“Text”是指查找类型为文本(非Html代码)，其它几项依次为在Html代码中查找，高级文本查找，包含Tag的查找；右边的输入框中要输入待查找的内容；下面一点的“Replace”指要替换为什么内容。

　　好，这里我们还是举一个例子来说明如何使用查找功能。假设我们想把正文文本中的“dreamwaver”替换为“Dreamwaver”，而如果只用“Text”查找，我们就会把“<title>”中的“dreamwaver”也替换掉，这样违背了我们的意愿。所以我们采用了“高级Text查找”，我们将查找条件(“+”、“-”按钮右的内容)设为“Inside Tag”和“Font”，意思是查找在font标签内的文字“dreamwaver”，然后将其替换为“Dreamwaver”。需要说明的一点是如图所示查找级别选项必须选为“Match Case”，也就是必须完全匹配查找条件，否则文字中的大小写区别将被忽略。

设置好后，点击“Replace All”，查找替换过程就开始了，替换完毕后所有被替换的地方会显示在替换信息列表中，文件前的小绿点表示替换成功。

18.DM查找替换的技巧(二)
　　　在这个技巧中我们接着上一个的内容，看看包含Tag的查找替换。首先把例子中要实现的效果说一下，假设我们的网站中所有的图片都设置了“alt”属性(只有背景图和个别补角的图不设置此属性)，但由于原来做网页时没有注意设置图片的“Border”属性值为0，个别图片在浏览时出现边框而影响了浏览效果，所以想要把所有的已设“alt”值的图片的“Border”值设为0，而在图片很多的情况下我们是不可能一张张的图去改的，这时如果利用Dreamwaver包含有Tag的查找替换功能，就能很简单的解决问题。

如图所示我们先选定文件夹，然后设包含在img标签内的，具有“alt”属性并且符合“alt=any value”做为查找条件，再把“Action”设为“Set Attribute”“ Border”“0”，这个设置的意义是对符合条件的图片其“Border”属性统一设为“0”,点击“Replace All”按钮。很快，查找替换就完成了，你看33张图片被准确无误的修改，所以说只要巧用Dreamwaver的查找替换，许多看起来复杂的工作也会变的非常轻松。

　　Dreamwaver允许我们把设计好的查找替换作为一个查询文件存储起来，点击如图中所示的按钮，在弹出的“保存为”对话框中输入文件名，点击确定完成。这样我们下一次遇到类似的查找替换操作时，就不必在设置一次，只要打开上次保存的文件就行。

　　例子举完了，但实际的情况中也许要靠我们自己去发现解决问题的方法。另外要提醒的是进行查找替换时，被操作的文件不要处于被编辑的状态，否则有可能会出现替换出错的问题。

19.鼠标移过链接时实现特定响应
　　你一定看到很多网页使用了这样的技巧，当鼠标移到某一个链接上时，在页面的其它位置会出现一段对链接的解释性文字。

　　源码：

1.在三个链接的代码中添加onMouseOver()语句

<a href="/pc/pcketang/index.htm" onMouseOver="swap(1)" class="p2">电脑交互教程</a>
<a href="/pc/softdown/index.htm" onMouseOver="swap(2)" class="p2">共享软件下载</a>
<a href="/pc/hangqing/index.htm" onMouseOver="swap(3)" class="p2">硬件追踪</a>

2.在html文件的“<head>”中添加如下JavaScript语句：

<script language="JavaScript">

</script>
2.在<head>中插入下面一段JavaScript：

<script language="JavaScript">
var timerID = null;
var timerRunning = false;

function stopclock (){
        if(timerRunning)
                clearTimeout(timerID);
        timerRunning = false;
}
function showtime () {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        var timeValue = "" + ((hours >12) ? hours -12 :hours);
        timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
        timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
        timeValue += (hours >= 12) ? " P.M." : " A.M.";
        tt.value=timeValue;
        timerID = setTimeout("showtime()",1000);
        timerRunning = true;
}
function startclock () {
        stopclock();
        showtime();
}
</script>
3.在<body>中加入 onload="startclock();"   语句：

<body onLoad="startclock();">

　　下面是详细的步骤，我们来具体做一下吧。

　　1、显示日期和星期：
我们可以在页面的任意位置显示当前的日期和星期，我们把下面一段JavaScript代码插入到要显示日期的地方即可，需要注意的是，必须为显示区留出足够的位置，不然有可能在浏览时发生折行而影响美观；

2、显示不断跳动的时间：

　　虽然我们很容易从系统读取时间并把它显示出来，但如果我们不采用一定的技巧，显示出的时间只能是网页打开时的时间，它是固定不变的。这里我们来实现一个不断随系统时间变化的时钟。
　　第一步先在要显示时间的地方插入一个文本框TextField并命名为tt(一定要注意大小写哦)，它的作用是作为时间输出的对象，我们在JavaScript中将timeValue值赋给tt.value，也就是随时改变文本框的显示值来动态显示时间；
　　第二步在<head>中插入如下的JavaScript代码，这段代码的作用是每隔一秒读取一次系统时间，然后将它在文本框中显示；

第三步在<body>中添入“onload="startclock();"”，这句代码的作用是在网页加载时调用startclock()函数，也就是开始显示动态时间变化。

人回来类~

2004-11-12 22:36:31

傷心宝宝

等级: VIP用户

发贴: 796 贴
货币: 349 金币
积分: 1955 分
经验: 0 点
体力: 200 点
注册: 2004-09-09

回复：★［网页制作技巧］基础知识类★（整理中。。。）

21.页面滚动显示
　　有时我们公告窗口中的内容较多，而公告窗口又不能设定的太大，如果加上滚动条则会影响浏览效果，这时让窗口中的内容自行滚动会是一个不错的解决方法，下面我们看看怎样用几句简单的JavaScript语句来实现它。

　　源码：
1.主窗口自行滚动的JavaScript代码：

<script language="JavaScript">

</script>

　　我们只要把“源码粘贴框”中的JavaScript代码复制到你想要显示最后更新时间的地方就行了。

　　如果我们把代码复制到如下的表格中，则每次这个页面的html文件更改时，表格中便自动显示出更新时间。

　　代码中document.write()的意思是在页面上写出括号内设定的内容，现在我们采用“document.lastModified”得到文件最后更新时间，并把它显示出来。灵活运用“document.write()”语句，我们还能在页面上输出其它内容，比如说当前的时间、日期、用户信息等，大家可以去试一试。

23.跑马灯大全(一)
　　实现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句。

　　适当的运用<marquee>标签的参数，可以表现出不同的效果：

　　1、左右弹来弹去的跑马灯

　　实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动，direction=left表示运动方向向左。marquee的宽度可以使用绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在Netscape下是看不到的。

　　源码：
<marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>

　　２、跑的很快的跑马灯

　　只要在<marquee>标签内加上“scrollamount=30”参数即可。

　　３、带有超级链接的跑马灯

　　其实实现的方法很简单，把整个<marquee></marquee>语句包含在超链接中就行，你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接，这样的跑马灯用来发布滚动新闻或是做站点导航再合适不过了。

　　源码：
<marquee width=90%>
<a href="http://www.soyee.net/bbs/index.asp"　target=_blank>带有超链接的跑马灯!点我试试？</a>
　　　　　　　　　　<a href="http://www.soyee.net/"　target=_blank>还有一条呢!点我试试？</a>
</marquee>

　　以上几个例子都是<marquee>标签参数的应用，下面把所有可以利用的参数列在表中供你参考，不过还是要提醒你，<marquee>标签只被IE所支持，使用Netscape浏览器是看不到的噢。

参数用法介绍
behavior=scroll, slide, alternate 跑马方式：循环绕行，只跑一次就停住，来回往复运动
direction=left,right 跑马方向：从左向右，从右向左
loop=100 跑马次数：循环100次，如不写默认为一直循环
width=100%,height=200 跑马范围：宽为100%，高为200像素
scrollamount=20 跑马速度：数越大越快
scrolldelay=500 跑马延时：毫秒数，利用它可实现跃进式滚动
hspace=20，vspace=20 跑马区域与其它区域间的空白大小
bgcolor=#00FFCC 跑马区域的背景颜色

你已经看到，尽管<marquee>参数不少，单毕竟不能实现复杂的和自定义的特殊跑马灯效果，而且还有浏览器限制，所以我们更多情况下会采用JavaScript来实现跑马灯，那就是我们下一个技巧的内容。

24.跑马灯大全(二)
　　这里向你介绍几个用JavaScript实现的较复杂的跑马灯，你只须把源码粘贴框中的代码按照说明复制的指定的位置就能看到跑马灯的效果。

　　1、状态栏中的跑马灯

　　在默认状态下浏览器的状态栏中显示的是链接指向信息，给人的感觉很单调。如果我们把问候语或是站点的介绍放在状态栏中滚动显示，一定能取得很好的效果。

　　源码：
1、将以下代码放在<head>与</head>之间：

<script LANGUAGE="JavaScript">
<!-- Begin
var Mes=new Array();
Mes[0]="搜依欢迎你！             ";
Mes[1]="感谢你关注体验幽郁                 ";
Mes[2]="网页制作技巧　之　跑马灯大全               ";
var place=1;
var i=0;
function scroll()
{
window.status=Mes[i].substring(0, place);
if (place >= Mes[i].length)
{
if(i<2)
{
i++;
place=1;
window.setTimeout("scroll()",50);
}
else
{
i=0;
place=1;
window.setTimeout("scroll()",50);
}
}
else {
place++;
window.setTimeout("scroll()",50);
}
}
// End -－>
</script>

2、在<body>标签内加入onload 语句：

<body onload="scroll();">

　　实现步骤:
　　(1)首先将JavaScript代码复制到<head>与</head>之间，这段代码中包含了scroll()函数，它是实现跑马灯的主体代码。我们可以修改mes[]数组的值来改变跑马灯的内容，你也可以显示更多条的信息，不过代码中i的值应等于信息的条数，也就是等于mes[]数组的维数；
　　(2)然后在<body>标签中加入onload()语句即可。

　　2、超链接的跑马灯式提示信息

　　把你的“老鼠”移到链接上，弹出了一条跑马灯式的提示信息，这是怎么实现的呢，请接着看：

　　源码：
1.将下面代码放在<body>标签下：

<script>
if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){

if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}

else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}

function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}

</script>

2.然后在要出现提示信息的链接中，添加onMouseover语句：

<a href="pm23.htm" onMouseover="showtip2(this,event,'用marquee实现的各式跑马灯')" onMouseout="hidetip2()">跑马灯大全(一)</a>
<a href="/pc/index.htm" onMouseover="showtip2(this,event,'最多最全的电脑交互教程')" onMouseout="hidetip2()">电脑交互教程</a>
<a href="pmjq00.htm" onMouseover="showtip2(this,event,'点滴技巧装扮你的家')" onMouseout="hidetip2()">网页制作技巧</a>

　　实现步骤：
　　(1)先在<body>标签下面插入一段JavaScript代码；

　　(2)然后在需要实现跑马灯式提示信息效果的超链接中加入Onmouseover和Onmouseout语句。
25.为主页定义热键
　　“热键”是做什么用的呢？你一定知道菜单热键吧，也就是按钮下某个约定好的键时，会弹出一个菜单或进行一项操作。如果为我们的主页加上热键，来完成打开链接、回到页首等常见的操作，会给浏览者带来不少方便。怎么样，试一试吧。

　　如按下键盘上的“h”键，就能回到论坛首页；而按下“t”键则会打开一个测试窗口。

　　热键是怎么实现的呢？其实很简单，只须一小段JavaScript代码即可。

　　源码：
1.将下面JavaScript代码插入<head>与</head>之间：

<script language="JavaScript1.2">
var hotkey1=104;
var hotkey2=116;
var destination="index.asp";
function backhome(e){
if (document.layers){
get=e.which;
if (get==hotkey1)
window.location=destination;
else if(get==hotkey2)
window.location="test.htm";
}
else if (document.all){
if (event.keyCode==hotkey1)
window.location=destination;
else if(event.keyCode==hotkey2)
window.open("","测试公告窗口","width=340,height=163,toolbar=0,status=0,menubar=0,resize=0");
}
}
document.onkeypress=backhome;
</script>

　　为了使热键在IE和NETSCAPE中都得到支持，在JavaScript代码中我们需要对浏览器类型进行判断，并作相应的处理。这时用了if(document.layers)和if(document.all)来进行判断。另外代码中热键的键值是按键的ASCII码，104和116分别代表h和t键。

26.超链“确认”对话框
　　点击超链接，会弹出一个确认对话框，让你确认是否继续，如果选择“确定”则会继续加载链接页面，如选则“取消”则不会继续。

　　源码：
1.将下面一段代码插入<head>与</head>之间：

<script>
function rusure()
{
question = confirm("确实要去进入吗?")
if (question !="0")
{
window.open("","测试公告窗口","width=340,height=163,toolbar=0,status=0,menubar=0,resize=0");
}
}
</script>

2.在链接标签内加入onclick()语句：

<a href="" onClick="rusure(); return false;">来点击我</a>

　　实现的方法为两步，首先将源码粘贴框中的JavaScript代码插入到<head>与</head>之间，然后在链接的标签中加入onclick()语句即可。

　　这个方法其实还可以用在其它的地方，比如说对于一个“提交”按钮，如果加上确认对话框，就能给提交者反悔的机会。JavaScript提供的标准对话框有好几种，我们把它列在下表中，供你使用时参考。

名称及用法用法解释返回值
确认对话框：
re=confirm("确认信息") 选择“确认”或“取消”，用返回值控制响应真或假
(True/False)
警告对话框：
alert("警告信息")
仅是一个警告，点击“确定”自动消失无返回值
输入对话框：
re=prompt("问题","默认回答"）
返回用户输入的信息，做下一步的操作用户输入的文本串或空值

27.简单的鼠标跟随
　　当鼠标在这个页面上移动时会有一个可爱的小鼹鼠跟着你的鼠标跑来跑去，很有趣，那这种效果是如何实现的呢？

　　我们先把源码粘贴框中的JavaScript代码加入到Html的<body>标签内：

<script language="javascript" type="text/javascript">
function mousemoving(e)
{
if(document.layers)
{
status="x:"+document.floatDiv.left+" y:"+document.floatDiv.top
document.floatDiv.x=e.pageX
document.floatDiv.y=e.pageY
}
if(document.all)
{
    floatDiv.style.left=event.x+document.body.scrollLeft
    floatDiv.style.top=event.y+document.body.scrollTop
}

document.onmousemove=mousemoving
if(document.layers)
{
  document.captureEvents(Event.MOUSEMOVE)
}</script>

　　然后选择一幅图片，假设图片的路径是“img\haha.gif”,然后加入一个层，并把它的ID改为“floatDiv”(与上面代码中的层的ID保持一致)，把图片放置到层中即可。我们也可以直接在Html的<body>之间插入如下的代码，这跟上面操作的效果是一样的。

<div id="floatDiv" style="position:absolute;"><img src="img/haha.gif" width="53" height="74"></div>

人回来类~

2004-11-12 22:41:36

傷心宝宝

等级: VIP用户

发贴: 796 贴
货币: 349 金币
积分: 1955 分
经验: 0 点
体力: 200 点
注册: 2004-09-09

回复：★［网页制作技巧］基础知识类★（整理中。。。）

28.调查信息以Email形式发送
　　在一些页面上我们经常能看到调查信息，它是反馈浏览者信息的重要方式，比如做一个简单的调查，填写的信息将以电子邮件方式直接发送到指定信箱。

　　这个例子的实现步骤如下：

　　先在页面上作一个调查表单，可以参照下面的制作，也可以直接拷贝下面代码粘贴框中的代码到Html的<body>标签内：

<form name="testform" method="POST" action="mailttest@soyee.net?subject=调查信息"  enctype="text/plain">
                    <div align="left">你的姓名: 　　