现在时间是：
综合资源导航：

本站导航

最新关注

QQ排行榜

推荐图文

论坛热点

热门排行榜

最新评论

当前位置：首 页 >> 电脑>> 网站博客制作>> 文章列表

网页制作技巧及代码系列

作者：转载   发布时间：2008-01-13 18:42:40   浏览次数：1884
分享到：
男士们的辉煌选择 增高真皮休闲男鞋 增高真皮休闲男鞋 增高真皮休闲男鞋 男士们的辉煌选择
                                  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>栏内加入下面的命令：

　　<**** 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”定义的颜色。

　　试者将鼠标挪到“here”，观看效果。(注意这种效果只有在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">12亿中国人的网上学校</FONT><FONT FACE="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或其它的浏览器时，发现图形位置错位或者覆盖文字，这大大影响了网页的效果。下面的两幅图分别是某个文件在Internet Explorer和Netscape下浏览的效果图。

　　用Netscape浏览的效果图：

Netscape下不正常的显示效果

　　用Internet Explorer浏览的效果图：

Internet Explorer下的显示效果

　　如何控制这种情况的发生呢？这里我们就来谈一谈如何利用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值就可以了。

　　同样的，该方法也适用于改变表格的宽度的情况，只不过，选定了表格以后，删除的不是行的高度，而是列的宽度。
8.超级链接时如何设定目标窗口

　　目标窗口是页面链接所指内容显示的窗口，也就是当你单击了页面某一个链接后，该链接所指的内容在那个窗口显示。大多数情况下，我们无需关心它，因为一般都是在同一窗口显示。但是有时我们需要弹出一个新的窗口，而不是替代原来的窗口，怎么办呢？很简单，这里我们只要在超级链接的源代码target属性就可以了。

 

MTV系列播放器相关代码      MP3系列播放器相关代码      
代码生成器大全  网页代码常用小技巧
漂浮广告代码    音画贴代码
网页特效代码全集 任意链接下拉菜单
免费代码大全 自助网站的制作
网页特效使用方法 状态栏特效代码
十大网站设计错误 什么是成功的网站设计
广告联盟集锦 网站增流秘籍
网页制作常见问题解答 搜索引擎大全
更多网站博客制作内容 网页素材大全

　　下面我们就看一看TARGET属性：TARGET是链接标签

的属性，它的作用就是指定目标窗口，TARGET有以下几个值：

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

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

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

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

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

　　<a href="www.hongen.com" target="_blank">洪恩在线</a>
9.如何实现文字的自动换行

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

 

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

 

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

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

　　<table width="420">...</table>　

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

　　<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″>洪恩在线，12亿中国人的网上大学</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标记）

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便开始检查当前Site下的所有连接，如果发现了链接的错误则会在弹出的“Link Checker”对话框中列出链接错误所在的页面，接下来我们要做的只是记下出错页面，然后打开页面修改错误，既快又方便。

链接错误所在的页面

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

Check Target browser对话框

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

测试结果窗口

欢迎你接着看下面技巧
12.如何弹出公告窗口

　　你看到弹出的小窗口了吗？这就是常见的公告窗口。

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

　　源码粘贴框：

　　方法是直接在<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像素
　前面我们讲过往页面添加图形背景的方法，但是这种背景会与页面一道移动。如何让页面内容翻动使而背景图像固定不动呢？

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

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

edit style sheet

　　点击“New”弹出如下的对话框：

new style窗口

　　选中“Redefine HTML”选项，将Tag选择为“Body”，点击“OK”，出现如下的窗口：

style defination for body窗口

 

　　在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时可以隐藏面板
15.实现有立体感的表格边框

　　请看下面的例子，这是一个具有立体感的左边条。这个表格给人很精致的感觉，如果把它放在网页的一侧，做为你的网站的导航，一定回会为你的网页增色不少。好，下面我们一起看看怎样用表格实现这样的效果。

欢　迎　光　临
编程技巧
闪电空间
网上学习
真情无限
笑话乐园
给　我　写　信

　　如果你用Dreamwaver实现起来十分简单：

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

插入表格对话框

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

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

 

　　<4>修改表

MTV系列播放器相关代码      MP3系列播放器相关代码      
代码生成器大全  网页代码常用小技巧
漂浮广告代码    音画贴代码
网页特效代码全集 任意链接下拉菜单
免费代码大全 自助网站的制作
网页特效使用方法 状态栏特效代码
十大网站设计错误 什么是成功的网站设计
广告联盟集锦 网站增流秘籍
网页制作常见问题解答 搜索引擎大全
更多网站博客制作内容 网页素材大全

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

修改表格属性

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

源代码

　　欢迎接着看下面的技巧！
16.定制站点导航条

　　你一定发现很多网站都有“站点导航条”，通过它能使浏览网站的网友清楚明了的知道网站的结构，并能迅速找到自己感兴趣的内容。你是不是也想为自己的网站装上这样一个“站点导航条”呢？那么，我们一起来定制一个吧。

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

“Object”对话框

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

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

“Properties”对话框

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

添加条目的对话框

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

默认的显示项

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

插入的“change”函数

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

　　源码粘贴框：

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

　　欢迎接着看下面的技巧！
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的查找替换功能，就能很简单的解决问题。

包含Tag的查找替换

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


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

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

欢迎你接着看下一个技巧

21.页面滚动显示

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

　　点击下面的“打开自滚动窗口”按钮，你就能看到滚动显示的效果，而如果你点击“主窗口自行滚动”你会发现，连这个窗口也滚动起来。

　　

　　源码粘贴框：

　　下面我们来试着做一下吧。

　　1、你可以看到主页面的滚动只有一次，而不是循环滚动的，这样的滚动实现起来简单一些，我们只须在主页面的<head>与</head>之间插入一段JavaScript代码，这段代码中包含了一个scroller()函数。

　　如果要在按钮按下开始滚动，我们可在如下图所示位置加上onclick()语句，它的作用是当按钮被点击时调用scroller()函数。

插入语句的位置

　　而如果你想要主页面一打开就自行滚动，你只须在<body>与</body>之间加入“onload="scroller();"”语句，它的意思是页面加载时即调用scroller()函数。

　　2、循环滚动的公告窗口实现起来稍微要复杂一些，首先插入公告窗口<head>与</head>之间的JavaScript代码要做修改，如下面所示：

代码解释

　　然后在公告窗口的<body>中加入“onload="scroller();"”语句；最后我们需要在主页面中打开这个公告窗口，方法同样是在主页面的<body>中加入onload语句。如果你对实现公告窗口还不清楚的话，你可以参照一下第12个网页制作技巧“怎样实现公告窗口”的内容。

　　经过以上的步骤，会循环滚动的公告窗口就完成了，这样滚动窗口有时是非常有用的，怎么用？那就要看你的了。

欢迎接着看下面的技巧
22.自动显示最后更新时间

　　我们自己网页上传以后，经常会不断更新和添加新的内容，而怎样才能让浏览网页的网友知道自己的辛苦更新呢？通常我们会在网页的一角，列出此网页更新的最后日期，但是这个工作如果手工来做的话，既麻烦又容易遗忘。怎么样解决这个问题呢？

　　看了这个小技巧，你定会说，原来这么简单。好了，下面我们来做一下吧。

　　源码粘贴框：

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

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

本页最后更新日期: 07/10/2000 14:26:37

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

欢迎你接着看下面的技巧

23.跑马灯大全(一)

　　实现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句，它的效果如下所示：

滚动的文字

　　适当的运用<marquee>标签的参数，可以表现出不同的效果，请看下面的几个例子：

 

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

弹来弹去跑马灯!

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

　　源码粘贴框：

　　２、跑的很快的跑马灯

跑的很快跑马灯!　

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

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

带有超链接的跑马灯!点我试试？　　　　　　　　　　还有一条呢!点我试试？　

　　其实实现的方法很简单，把整个<marquee></marquee>语句包含在超链接中就行，你看看下面的代码就清楚了。当然你也可以把包含在<marquee></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来实现跑马灯，那就是我们下一个技巧的内容。

MTV系列播放器相关代码      MP3系列播放器相关代码      
代码生成器大全  网页代码常用小技巧
漂浮广告代码    音画贴代码
网页特效代码全集 任意链接下拉菜单
免费代码大全 自助网站的制作
网页特效使用方法 状态栏特效代码
十大网站设计错误 什么是成功的网站设计
广告联盟集锦 网站增流秘籍
网页制作常见问题解答 搜索引擎大全
更多网站博客制作内容 网页素材大全

 
24.跑马灯大全(二)

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

　　1、状态栏中的跑马灯

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

　　源码粘贴框：

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

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

　　把你的“老鼠”移到下面链接上试一试，有什么不同呢？原来弹出了一条跑马灯式的提示信息，这是怎么实现的呢，请接着看：

跑马灯大全(一)　　　　电脑交互教程　　　　网页制作技巧技巧

　　源码粘贴框：

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

　　(2)然后在需要实现跑马灯式提示信息效果的超链接中加入Onmouseover和Onmouseout语句。

25.为主页定义热键

　　“热键”是做什么用的呢？你一定知道菜单热键吧，也就是按钮下某个约定好的键时，会弹出一个菜单或进行一项操作。如果为我们的主页加上热键，来完成打开链接、回到页首等常见的操作，会给浏览者带来不少方便。怎么样，试一试吧。

　　　

　　按下键盘上的“h”键，就能回到网页制作技巧首页；而按下“t”键则会打开一个测试窗口。

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

　　源码粘贴框：

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

　　请先看下面的例子，试着点击下面的超链接，你会发现点击后弹出一个确认对话框，让你确认是否继续，如果选择“确定”则会继续加载链接页面，如选则“取消”则不会继续。

来点击我

　　源码粘贴框：

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

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

名称及用法
用法解释
 返回值
确认对话框：
re=confirm("确认信息")		 选择“确认”或“取消”，用返回值控制响应 真或假
(True/False)

警告对话框：
alert("警告信息")

仅是一个警告，点击“确定”自动消失 无返回值
输入对话框：
re=prompt("问题","默认回答"）
 返回用户输入的信息，做下一步的操作 用户输入的文本串或空值

MTV系列播放器相关代码      MP3系列播放器相关代码      
代码生成器大全  网页代码常用小技巧
漂浮广告代码    音画贴代码
网页特效代码全集 任意链接下拉菜单
免费代码大全 自助网站的制作
网页特效使用方法 状态栏特效代码
十大网站设计错误 什么是成功的网站设计
广告联盟集锦 网站增流秘籍
网页制作常见问题解答 搜索引擎大全
更多网站博客制作内容 网页素材大全

 

 

 

 

 

 

 

 

 

 










请填写详细信息发表评论
评论名字：
电子邮件：
评论内容：
验证字码：验证码

Copyright ©2012    云海之上 All Right Reserved.

Powered by LingCms 版权所有 © 2005-2012 Lingd.Net..

合作网站  申请加入