No 44 · 网页界面设计技巧

网页界面设计技巧

由于越来越多的企业开始建立自己的网站,网站除了具有传播信息的功能外,还往往代表企业的形象。网站建设商业化和广告化的趋势,对网页设计的艺术性提出了更高的要求。虽然HTML语言提供了对常用Windows标准控件的支持,但是,由于Windows标准控件的形状和颜色十分单一,网页的视觉效果可能会很差。例如:列表框和下拉列表框只能呈现凹陷边框,而且下拉列表的箭头的颜色不能改变,滚动条只能出现在窗口的下边和右边,当网页分成多个帧的时候,滚动条就不可避免的出现在网页的中间,破坏网页的整体性。若在网页的设计中主动配合Windows标准控件的形状和颜色,网页的创作空间就会受到限制。因此,有必要实现网页中的自定义控件,以满足网页设计艺术化的要求。
   编程原理
   用客户端的JavaScript脚本语言,对HTML语言的< UL>< /UL>、< SPAN>< /SPAN>和< DIV>< /DIV>标记进行编程,可以在Internet Explore中实现网页中的菜单、树形结构目录、滚动条、列表框、下拉列表框及其它控件。
   < SPAN>< /SPAN>标记定义了HTML文档中的一个行内间隔,可以给这个间隔赋一个id属性,给整个间隔一个统一的颜色、字体、边框、背景等属性,使整个间隔响应相同的事件,可以用这个标记制作菜单、树形结构目录、列表框及下拉列表框的某一项。多个< SPAN>< /SPAN>标记可以放在同一行内,组成下拉式菜单的菜单条。
   < DIV>< /DIV>标记定义了HTML文档中的一个矩形区域,可以给这个区域赋一个id,给整个区域一个统一的颜色、字体、边框、背景等属性,使整个区域响应相同的事件,通过设置< DIV>< /DIV>标记的style.display属性为block或none可以在运行时动态的显示或隐藏这个区域,可以用这个标记制作树形结构目录的子目录、弹出式菜单、下拉式菜单的某一子菜单、列表框及下拉列表框。通过程序代码设置< DIV>< /DIV>标记的style.posLeft、style.posTop、style.posWidth、style.posHeight属性,可以在运行时动态的改变< DIV>< /DIV>区域的位置和大小,用来设计滚动条。
   列表框和下拉列表框
   在一个< DIV>< /DIV>标记中放置一组< SPAN>< /SPAN>标记,不同的< SPAN>< /SPAN>标记间用< BR>标记换行,形成一个列表框。给< SPAN>< /SPAN>标记添加事件,使其能根据鼠标的位置改变颜色。在< SPAN>< /SPAN>标记的onclick事件中,完成指定的操作或将所选择的项目的innerText或id属性存放与隐藏控件或变量中,以便检索所选择的项目。
   在网页中放置一个< SPAN>< /SPAN>标记作为下拉列表框。
   在下拉列表框的右边放置另外一个< SPAN>< /SPAN>标记,设置这个< SPAN>< /SPAN>标记的背景图片,形成下拉箭头。在下拉列表框的下边放置一个< DIV>< /DIV>标记制作的列表框作为下拉列表,设置下拉列表的style.display属性为none,然后根据鼠标动作显示或隐藏列表。编写列表项目的onclick事件处理程序,将所选择的项目文本放在下拉列表框中。
   弹出式菜单
   由于网页不能响应鼠标右键,因此,在网页中只能用鼠标左键的click事件实现弹出式菜单。按照列表框的设计方法设计弹出式菜单,将弹出式菜单< DIV>< /DIV>标记的style.display属性设置为none。在document的click事件中,通过设置< DIV>< /DIV>标记的style.posLeft和style.posTop属性,将弹出式菜单移动到光标所在的位置,将< DIV>< /DIV>标记的style.display属性设置为block,显示菜单。当鼠标离开菜单时,隐藏菜单。
   下拉式菜单
   用一个< SPAN>< /SPAN>标记制作菜单条,菜单条< SPAN>< /SPAN>标记中嵌
   套几个< SPAN>< /SPAN>标记作为子菜单。按照弹出式菜单的设计方法,分别为每一个子菜单设计下拉菜单。通过响应子菜单的鼠标事件,显示或隐藏下拉式菜单。
   为了方便程序移植,可以将菜单数据放在数组里,在程序中通过document对象的write方法动态生成菜单。
   滚动条
   在网页中放置一个< DIV>< /DIV>标记作为滚动条的背景,设置背景的颜色和图片,背景图片的重复属性设置为repeat-x。在背景区域的左右两端放置两个< DIV>< /DIV>标记作为滚动条的左右箭头,设置左右箭头的背景颜色和背景图片。在背景区域的中间放置一个< DIV>< /DIV>标记作为滚动条的滑块,设置滑块的背景颜色和背景图片,背景图片的重复属性设置为repeat-x。在滚动条的上面覆盖一个事件< DIV>< /DIV>标记用来响应鼠标事件,不设置这个标记的背景颜色和背景图片属性,使其透明。为了能正确的看到滚动条的各个部分并使事件< DIV>< /DIV>区域能截获鼠标事件,应使事件< DIV>< /DIV>标记的Z-INDEX属性最大,背景< DIV>< /DIV>标记的Z-INDEX属性最小。在事件< DIV>< /DIV>标记的鼠标事件中,通过比较鼠标window.event.clientX和滚动条各个部件的相对位置进行不同的滚动操作。
   在window对象的load事件和resize事件中根据窗口和网页的大小改变滚动条各个部件的大小和位置。在网页中放置一个< DIV>< /DIV>标记,将网页中需要滚动的部分都放在这个< DIV>< /DIV>区域中。在滚动条的滚动事件中通过改变这个标记的style.posLeft和style.posTop属性,实现网页的滚动。
   用以上方法实现的滚动条,可以设计成任意的大小和颜色,放置在网页的任意位置,选择任意的图片作为箭头和滑块的背景,极大的满足艺术化设计网页的需求。
   本文利用了HTML标记< SPAN>< /SPAN>和< DIV>< /DIV>的风格属性,在网页中实现了菜单、树形结构目录和自定义的滚动条、列表框、下拉列表框。到目前为止,只有运行在Windows平台下的浏览器Internet Explore支持这种风格属性,实际应用中应当判断客户浏览器类型,以便提供不同的网页。

 

网页在线人数统计的做法
 

  
在浏览网页的时侯,常常可以看见一些“当前网站上的人数是XXX人”的在线人数同计。如何用ASP来做一个呢?首先,分析一下它的做法,一般来说,这些线上人数统计都是指一个时段内的访客人数统计。比如(5分钟内,10分钟内)而这个时间的长短,是由设计者设定的。
   在这个时段内同计各个不同IP的访客总数,就可以得出当前的线上人数了,但这里有一个精确问题需要解决,至于用什么办法来精确地统计,那就是各人不同的做法了,比如可以用自动提交的页面,隔一段时间读取COOKIES等等,而在ASP中,有一个更好的技巧,就是使用session对象来统计,这里介绍一下gobal.asa这个文件,这是一个很重要的一个文件,请看看它的结构。
<SCRIPT LANGUAGE="VBScript" RUNAT="Server">
Sub Session_OnStart
End Sub
Sub Session_OnEnd
End Sub
sub Application_OnStard
End Sub
sub Application_OnEnd
End Sub</SCRIPT>
   当有一个会话发生时(用户浏览网页,向Web服务器发出请求)那么,如果自服务器启动后第一个用户的话,就会同时发生Application_OnStard和Session_OnStart这两个事件,之后,再有别的用户发出请求的话,就只发生Session_OnStart这个事件,而session的生存期是多长,是可以设定的,Session.timeout=X(分钟)
   好了,有了这个很好用的方法,我们就能准确地统计出在线人数了,而人数总计是用一个application变量来保存,当在第一个会话开始时,在Application_OnStard事件中放置一条清空计数器的语句application("online")=0,然后,在Session_OnStart事件中,放置一条增加在线人数的语句application("online")=application("online")+1,而在Session_OnEnd事件相应地放一条减少在线人数的语句,令计数值减一。
   这样,这个文件就改为如下
<SCRIPT LANGUAGE="VBScript" RUNAT="Server">
Sub Session_OnStart
application("online")=application("online")+1
End Sub
Sub Session_OnEnd
application("online")=application("online")-1
End Sub
sub Application_OnStard
application("online")=0
End Sub
sub Application_OnEnd
application("online")=0
End Sub</SCRIPT>
   接下来编一个显示图形数字的程序,把在线人数显示在指定的页面上。这样就能得出在人数了
*online.asp
<% @language="vbscript" %>
<%
tmp=application("online")
tmp=Cstr(tmp)
dim disp(20)
dim images(20)
dbbits=len(tmp)
for I= 1 to dbbits
disp(I)=left(right(tmp,I),I-(I-1))
next
for I=dbbits to 1 step -1
images(I)="<img src="&"http://xxxx.com.cn/pic"&"/"&disp(I)&".gif>"
response.write "document.write('"&images(I)&"');"
next
%>
   上面的程序很简单,这里不作分析了,请大家自己阅读一下。在调用在线统计的页面上用一句script语句引用online.asp文件,以显示图形统计器。
<script language="javascript" src="http://xxxx.com.cn/online.asp"></script>
   现在可以了,记住要点,你必须把gobal.asa放在正确的web应用程序根目录上,而最好单独为这个统计新建一个web应用程序,不要与其它别的程序混乱了,不然得出的数据是不准确的,而把这个程序修改为多用户的在线统计也很简单。这样就可以提供在线统计服务了,如何实现请又大家去思考一下吧....
 

网页制作技巧


1.设置网页的背景图像
网页的背景色和背景图选择得好,会是页面增色不少。如果选取单一的背景色,难免显得单调,如果选择整个图片做背景,由于图片本身的文件大,造成网页的加载时间长,一般用户很难有耐性等待下去。那么带背景的网页是如何制作出来的?
很简单,一般是采用一幅很小的图片,然后铺展开,形成很漂亮的背景。对背景图的要求当然是越漂亮越好,文件越小越好。这里我们不谈论图片的制作了。
当你有了一幅可以自然拼接的图像后,在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>
下面是这段代码产生的显示效果:
怎么样?如果你选择的背景图片质量很高的话,背景会更漂亮的。
2.如何去掉主页超链接的下划线?
在访问一个页面的时候,我们会发现,当鼠标移动到具有超级连接的文字上的时候,有的会产生相应的下划线。然而有些网页却没有。主页超链接的下划线是如何去掉的呢?
我们在<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>
下面我们在看一看效果,试着将鼠标移动到下面的超级链接上去,是不是超级链接不会产生下划线了。
超级链接
3.DreamWeaver中如何防止出现重叠现象
文字和图像混排,可以为我们的页面增加色彩和活力。当然这是在文字和图像搭配得比较得当和得体的前提下。然而有的文字和图像的排列却往往不尽人意。有时我们发现利用Dreamweaver制作的页面在Internet Explorer中看很漂亮,图形定位也很准确,但是当你使用Netscape或其它的浏览器时,发现图形位置错位或者覆盖文字,这大大影响了网页的效果。下面的两幅图分别是某个文件在Internet Explorer和Netscape下浏览的效果图。
用Netscape浏览的效果图:
用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>
另外我们也可以利用表格进行图形的定位,也不失为一种好方法,但是也可能会出现其他的问题。这一点我们会在其他的技巧中讨论。
4.中文网页制作中段落缩进的方法
在利用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值就可以了。
同样的,该方法也适用于改变表格的宽度的情况,只不过,选定了表格以后,删除的不是行的高度,而是列的宽度。
5.超级链接时如何设定目标窗口
目标窗口是页面链接所指内容显示的窗口,也就是当你单击了页面某一个链接后,该链接所指的内容在那个窗口显示。大多数情况下,我们无需关心它,因为一般都是在同一窗口显示。但是有时我们需要弹出一个新的窗口,而不是替代原来的窗口,怎么办呢?很简单,这里我们只要在超级链接的源代码target属性就可以了。
下面我们就看一看TARGET属性:TARGET是链接标签的属性,它的作用就是指定目标窗口,TARGET有以下几个值:
_self-将链接指向的内容装载到当前页的窗口或框架中;
_top-完全取代当前页面的所有框架;
_blank-为链接指向的内容打开一个新的窗口
_parent-把链接指向的内容装入当前页〈FRAMESET〉父窗口中
下面这段代码,便会使超级链接产生一个新的窗口:
<a href="www.hongen.com" target="_blank">洪恩在线</a>

6.如何实现文字的自动换行
我们在编制主页的时候,有时候会发现自己制作的主页不能够自动折行(往往是在IE中能够自动折行,而在Netscape中不能),尤其是对一大段文字,必须拖动窗口的滑块跑很久才能看完后面的文字。很是费劲,对不对。如果这样的页面在网络上发布的话,肯定不会受到欢迎的。
如何消除这种情况呢?这里我们介绍用表格来定位的方法:
我们认为很有效的方法就是采用表格来对文字进行定位。当然这里的表格我们一定要给定它的绝对宽度(直接给定或间接给定宽度),那么输入的长文字便会自动的换行了。
这里所说的直接给定表格的宽度,是指我们直接设定表格的width属性值为某一个设定值。如我们可以如下设定:
<table width="420">...</table> 
相对值是指采用相对于上一级表格的宽度,通常用一个百分数来表示。比如我们在一个相对外层的表格中设定了表格的宽度,那么在内层的表格中只要给出一个相对的宽度就相当于已经给定了表格绝对宽度。我们可以看看下面的源代码:
<table width="760">
...
<table width="60%">
...
</table>
</table>
这里就相当于我们已经给定了内层表格的宽度为760*60%=456个像素点了。
如果你有兴趣,可以尝试着试一试。
7 如何制作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标记)
8 灵活运用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”并单击,这时会弹出一个对话框。
我们一般选择“IE 4.0”和“Netscape4.0”检查即可,如果检查结果发现有浏览器不支持的地方,我们在测试结果窗口中能够看到是哪个语句有问题,我们只须做相应的修改即可。
欢迎你接着看下面技巧
12.如何弹出公告窗口
你看到弹出的小窗口了吗?这就是常见的公告窗口。
有时我们需要采用公告窗口来展示一些重要的信息,所谓公告窗口是指我们浏览主页时,随主页面的加载而自动弹出的小窗口,公告窗口中一般会放上新闻、布告的信息。下面我们看看怎样用几句简单的JavaScript语句来实现它。
源码粘贴框:
方法一:
在<head></head>之间插入如下一段JavaScript代码:
<script language="JavaScript">
<!--
var gt = unescape('%3e');
var popup = null;
var over = "Launch Pop-up Navigator";
popup = window.open('', 'popupnav', 'width=200,height=170,resizable=0,scrollbars=auto');
if (popup != null) {
if (popup.opener == null) {
popup.opener = self;
}
popup.location.href = 'test.htm';
}
// -->
</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像素
9.如何让背景图象不滚动?
前面我们讲过往页面添加图形背景的方法,但是这种背景会与页面一道移动。如何让页面内容翻动使而背景图像固定不动呢?
HTML也给出了这样的代码,只是不经常用而已。我们只需要将body的bgproperties属性设置为“fixed(固定)”。
在Dreamweaver中“Text”菜单下,选择“CSS Styles”子菜单,然后选择“Edit Style Sheet”命令(快捷键为:ctrl+shft+E),弹出如下的窗口:
点击“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时可以隐藏面板
10.实现有立体感的表格边框
请看下面的例子,这是一个具有立体感的左边条。这个表格给人很精致的感觉,如果把它放在网页的一侧,做为你的网站的导航,一定回会为你的网页增色不少。好,下面我们一起看看怎样用表格实现这样的效果。
如果你用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">
<!--
function change(myform)
{
var url="";
url=myform.select.options[myform.select.options.selectedIndex].value;
top.location.href=url;
}
//-->
</script>
到这里我们就定制好了自己的“站点导航条”,如果你使用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的查找替换功能,就能很简单的解决问题。
如图所示我们先选定文件夹,然后设包含在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文件的“&lt;head&gt;”中添加如下JavaScript语句:
<script language="JavaScript">
<!--
text=new Array(4);
text[0]=new Image(); text[0].src="img/text0.gif";
text[1]=new Image(); text[1].src="img/text1.gif";
text[2]=new Image(); text[2].src="img/text2.gif";
text[3]=new Image(); text[3].src="img/text3.gif";
function swap(t)
{
if(t>0)
document.TEXT0.src=text[t].src
else
document.TEXT0.src=text[0].src
}
//-->
</script>
这样的效果我们采用JavaScript很容易就能实现,下面我们来具体做一下:
1、把介绍性文字或图片制作成几幅高宽相同的gif图,上面例子中我们制作了四幅图,分别作为默认的图片和三个介绍性的图片,分别命名为text0-text3,然后我们把默认的图片插入固定位置,并给此图象对象命名为TEXT0;
2、然后在三个链接的代码中添加onMouseOver()语句,这个语句的作用是,当鼠标移动到链接上面时,让程序控制出现什么响应;我们在如下图的位置加入这样的语句:
其中swap()是一个函数,在下一步中将要定义它,我们分别在“电脑交互教程”的链接中加入“onMouseOver="swap(1)"”,在“共享软件下载”的链接中加入“onMouseOver="swap(2)"”,在“硬件追踪”的链接中加入“onMouseOver="swap(3)"”;
3、在html文件的“<head>”中添加如下JavaScript语句:
好,做完以上的工作,我们在浏览器中就能看到如前面所示的效果了。提醒你的是并不是所有的浏览器都支持此效果,另外在你加入JavaScript语句的时候一定要注意区分大小写噢。你也可以利用此技巧的原理为网页增添其它的JnMouseOver响应效果。
欢迎你接着看下一个技巧
20.显示日期和跳动的时间
现在很多网页上都有一个区域显示日期、时间和星期,许多网友问这是怎么实现的呢?下面给出一个实现的方法,最终的效果请看下面演示:
今天是: 2003年12月1日星期一 现在时间:
源码粘贴框:
1.在要显示日期和星期的地方插入如下一段JavaScript:
<script language=JavaScript> var version = 1.0;</script>
<script language=JavaScript1.1> var version = 1.1;</script>
<script language=JavaScript1.2> var version = 1.2;</script>
<script language=JavaScript1.3> var version = 1.3;</script>
<script language="JavaScript">
<!--
var y=new Date();
var gy=y.getYear();
var dName=new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
var mName=new Array("1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月");
if (version < 1.3)
{
if (gy<2000)
{
document.write("<FONT COLOR=\"black\" class=\"p1\">"+"19"+y.getYear()+"年" + mName[y.getMonth()] + y.getDate() + "日" + dName[y.getDay()] + "" + "</FONT>");
}
else
document.write("<FONT COLOR=\"black\" class=\"p1\">"+y.getYear()+"年" + mName[y.getMonth()] + y.getDate() + "日" + dName[y.getDay()] + "" + "</FONT>");
}
else
{
document.write("<FONT COLOR=\"black\" class=\"p1\">"+y.getFullYear() +"年"+ mName[y.getMonth()] + y.getDate() + "日" + dName[y.getDay()] + "</FONT>");
}
//-->
</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>中加入 οnlοad="startclock();" 语句:
<body onLoad="startclock();">
下面是详细的步骤,我们来具体做一下吧。
1、显示日期和星期:
我们可以在页面的任意位置显示当前的日期和星期,我们把下面一段JavaScript代码插入到要显示日期的地方即可,需要注意的是,必须为显示区留出足够的位置,不然有可能在浏览时发生折行而影响美观;
2、显示不断跳动的时间:
虽然我们很容易从系统读取时间并把它显示出来,但如果我们不采用一定的技巧,显示出的时间只能是网页打开时的时间,它是固定不变的。这里我们来实现一个不断随系统时间变化的时钟。
第一步先在要显示时间的地方插入一个文本框TextField并命名为tt(一定要注意大小写哦),它的作用是作为时间输出的对象,我们在JavaScript中将timeValue值赋给tt.value,也就是随时改变文本框的显示值来动态显示时间;
第二步在<head>中插入如下的JavaScript代码,这段代码的作用是每隔一秒读取一次系统时间,然后将它在文本框中显示;
第三步在<body>中添入“οnlοad="startclock();"”,这句代码的作用是在网页加载时调用startclock()函数,也就是开始显示动态时间变化。
好,做完以上的工作,我们在浏览器中就能看到显示日期、星期和动态时间的效果了。
欢迎你接着看下一个技巧
21.页面滚动显示
有时我们公告窗口中的内容较多,而公告窗口又不能设定的太大,如果加上滚动条则会影响浏览效果,这时让窗口中的内容自行滚动会是一个不错的解决方法,下面我们看看怎样用几句简单的JavaScript语句来实现它。
点击下面的“打开自滚动窗口”按钮,你就能看到滚动显示的效果,而如果你点击“主窗口自行滚动”你会发现,连这个窗口也滚动起来。
源码粘贴框:
1.主窗口自行滚动的JavaScript代码:
<script language="JavaScript">
<!--
locate = 0;
function scroller() {
if (locate !=400 ) {
locate++;
scroll(0,locate);
clearTimeout(timer);
var timer = setTimeout("scroller()",3);
timer;
}
}
</script>
如果你想让窗口打开时即开始滚动,你可以在
<body>与</body>之间加上onload语句,如下所示:
<body οnlοad="scroller();">
2.公告窗口循环滚动的JavaScript代码:
你可以把它插入公告窗口的<head>中
<script language="JavaScript">
<!--
locate = 0;
function scroller() {
if (locate !=600 ) {
locate++;
scroll(0,locate);
clearTimeout(timer);
var timer = setTimeout("scroller()",3);
timer;
}
else{locate=0
scroll(0,locate);
clearTimeout(timer);
var timer = setTimeout("scroller()",3);
timer;
}
}
// -->
</script>
然后在<body>中加入onload()语句。
要注意的是:上面代码中locate的值应该根据你所制作
的页面的高度适当调整。
下面我们来试着做一下吧。
1、你可以看到主页面的滚动只有一次,而不是循环滚动的,这样的滚动实现起来简单一些,我们只须在主页面的<head>与</head>之间插入一段JavaScript代码,这段代码中包含了一个scroller()函数。
如果要在按钮按下开始滚动,我们可在如下图所示位置加上onclick()语句,它的作用是当按钮被点击时调用scroller()函数。
而如果你想要主页面一打开就自行滚动,你只须在<body>与</body>之间加入“οnlοad="scroller();"”语句,它的意思是页面加载时即调用scroller()函数。
2、循环滚动的公告窗口实现起来稍微要复杂一些,首先插入公告窗口<head>与</head>之间的JavaScript代码要做修改,如下面所示:
然后在公告窗口的<body>中加入“οnlοad="scroller();"”语句;最后我们需要在主页面中打开这个公告窗口,方法同样是在主页面的<body>中加入onload语句。如果你对实现公告窗口还不清楚的话,你可以参照一下第12个网页制作技巧“怎样实现公告窗口”的内容。
经过以上的步骤,会循环滚动的公告窗口就完成了,这样滚动窗口有时是非常有用的,怎么用?那就要看你的了。
欢迎接着看下面的技巧
21.页面滚动显示
有时我们公告窗口中的内容较多,而公告窗口又不能设定的太大,如果加上滚动条则会影响浏览效果,这时让窗口中的内容自行滚动会是一个不错的解决方法,下面我们看看怎样用几句简单的JavaScript语句来实现它。
点击下面的“打开自滚动窗口”按钮,你就能看到滚动显示的效果,而如果你点击“主窗口自行滚动”你会发现,连这个窗口也滚动起来。
源码粘贴框:
1.主窗口自行滚动的JavaScript代码:
<script language="JavaScript">
<!--
locate = 0;
function scroller() {
if (locate !=400 ) {
locate++;
scroll(0,locate);
clearTimeout(timer);
var timer = setTimeout("scroller()",3);
timer;
}
}
</script>
如果你想让窗口打开时即开始滚动,你可以在
<body>与</body>之间加上onload语句,如下所示:
<body οnlοad="scroller();">
2.公告窗口循环滚动的JavaScript代码:
你可以把它插入公告窗口的<head>中
<script language="JavaScript">
<!--
locate = 0;
function scroller() {
if (locate !=600 ) {
locate++;
scroll(0,locate);
clearTimeout(timer);
var timer = setTimeout("scroller()",3);
timer;
}
else{locate=0
scroll(0,locate);
clearTimeout(timer);
var timer = setTimeout("scroller()",3);
timer;
}
}
// -->
</script>
然后在<body>中加入onload()语句。
要注意的是:上面代码中locate的值应该根据你所制作
的页面的高度适当调整。
下面我们来试着做一下吧。
1、你可以看到主页面的滚动只有一次,而不是循环滚动的,这样的滚动实现起来简单一些,我们只须在主页面的<head>与</head>之间插入一段JavaScript代码,这段代码中包含了一个scroller()函数。
如果要在按钮按下开始滚动,我们可在如下图所示位置加上onclick()语句,它的作用是当按钮被点击时调用scroller()函数。
而如果你想要主页面一打开就自行滚动,你只须在<body>与</body>之间加入“οnlοad="scroller();"”语句,它的意思是页面加载时即调用scroller()函数。
2、循环滚动的公告窗口实现起来稍微要复杂一些,首先插入公告窗口<head>与</head>之间的JavaScript代码要做修改,如下面所示:
然后在公告窗口的<body>中加入“οnlοad="scroller();"”语句;最后我们需要在主页面中打开这个公告窗口,方法同样是在主页面的<body>中加入onload语句。如果你对实现公告窗口还不清楚的话,你可以参照一下第12个网页制作技巧“怎样实现公告窗口”的内容。
经过以上的步骤,会循环滚动的公告窗口就完成了,这样滚动窗口有时是非常有用的,怎么用?那就要看你的了。
欢迎接着看下面的技巧
22.自动显示最后更新时间
我们自己网页上传以后,经常会不断更新和添加新的内容,而怎样才能让浏览网页的网友知道自己的辛苦更新呢?通常我们会在网页的一角,列出此网页更新的最后日期,但是这个工作如果手工来做的话,既麻烦又容易遗忘。怎么样解决这个问题呢?
看了这个小技巧,你定会说,原来这么简单。好了,下面我们来做一下吧。
源码粘贴框:
<script language="JavaScript">
<!--hide script from old browsers
document.write("本页最后更新日期: " + document.lastModified + "")
// end hiding -->
</script>
我们只要把“源码粘贴框”中的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 width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>
2、跑的很快的跑马灯
跑的很快跑马灯! 
只要在<marquee>标签内加上“scrollamount=30”参数即可。
3、带有超级链接的跑马灯
带有超链接的跑马灯!点我试试?         
其实实现的方法很简单,把整个<marquee></marquee>语句包含在超链接中就行,你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接,这样的跑马灯用来发布滚动新闻或是做站点导航再合适不过了。
源码粘贴框:
<marquee width=90%>
<a href="http://www.hongen.com/default.htm" target=_blank>带有超链接的跑马灯!点我试试?</a>
<a href="http://www.hongen.com/pc/index.htm" 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 οnlοad="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="pmjq00.htm";
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.οnkeypress=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.οnmοusemοve=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>
好了,现在浏览一下网页,看看效果吧。
28.调查信息以Email形式发送
在一些页面上我们经常能看到调查信息,它是反馈浏览者信息的重要方式,这个例子是一个简单的调查,填写的信息将以电子邮件方式直接发送到指定信箱。
调查信息
你的姓名:   
你的Email地址:
你对网页制作技巧栏目的意见和建议:

注意:按下“发送”按钮后你填写的内容将以电子邮件方式发送给我们(ketang.pc@goldhuman.com)
这个例子的实现步骤如下:
先在页面上作一个调查表单,可以参照上面的制作,也可以直接拷贝下面代码粘贴框中的代码到Html的<body>标签内:
<form name="testform" method="POST" action="mailto:ketang.pc@goldhuman.com?subject=调查信息" enctype="text/plain">
<div align="left">你的姓名:   
<input type="text" name="text1" size=20>
<br>
你的Email地址:
<input type="text" name="text2" size=20>
<br>
你对网页制作技巧栏目的意见和建议:<br>
<textarea name="text3" cols="50" rows="4"></textarea>
<br>
<input type="submit" value="发送" name="submit">

<input type="reset" value="重填" name="reset">
<br>
注意:按下“发送”按钮后你填写的内容将以电子邮件方式发送给我们(ketang.pc@goldhuman.com)
</div>
</form>
需要改动的地方是<form>标签内的action属性的电子邮件地址,把它改为你所需要的即可。
1.如何快速换行?
在FrontPage中,回车键的作用是另起一段,在HTML中的代码是“<p>…</p>” ,如果只是想换行,用回车就不太好看,行间距显得过大。
通常我们采用下面的方法:单击“插入”菜单下的“换行符”命令,选择一种换行方式,一般选择“普通换行符”,这样文字就换了一行。在HTML中换行的代码是“<br>”。
最简单的办法是在要换行的地方按下Shift键,然后再敲回车,就会产生一个换行符。
2.轻松下载网页或站点
你一定想下载一下感兴趣的网页,以便慢慢欣赏吧!利用FrontPage能够轻松做到这一点,甚至可以下载整个站点。
启动FrontPage后,单击“文件”菜单,选择“新建”项中的“网站”命令,出现的“新建”对话框,选“导入站点向导”图标。
输入网页所下载的位置,单击“确定”。
在“站点导入向导——选择源”对话框中,选“从全球广域网”,在“位置”中输入想下载的网站的网址,然后单击“下一步”;
这一步要求选择下载数量,可以设置下载网站的层次、大小以及是下载文本还是图像;
点“下一步”,完成站点导入向导的设置,再点“完成”;
计算机开始下载网页,这需要等待一段时间。
下载完成后,你就可以对网页进行浏览或编辑了。
3.为什么图片显示不出来?
如果你用FrontPage做了一个主页,里面有一些图片,在本地一切正常,但上传后背景、图片就显示却显示不出来,这可怎么办呢?
产生这样的问题,有两种可能,一是图片用的是绝对路径,二是大小写问题。
先说第一种情况,如果你的图片链接用的是绝对路经,上传后就找不到此图片文件。这时打开源文件,选中上传后显示不出来的图片,单击鼠标右键,选择“属性”,可以看到“图片源”为file:///D:/lhm/img/zt-1gif形式,这就是绝对路径,我们可以将其改为相对路径“img/zt-1.gif”即可。
第二种情况是因为图形文件名或是图形文件所在的目录名中有大写字母,或是里面有中文。因为服务器所在操作系统一般都是unix或linux下的,系统是区分大小写的。还有就是不要用中文文件名或目录名。
比如上图中,图形文件所在的目录为Img,将其改为img,上传后显示就正常了。
4.如何不显示框架的边界?
做好的页面中,采用了多种框架,如果想要框架的边界不显示,可以用下面的方法。
选择“框架”菜单中的“框架属性”命令,弹出“框架属性”对话框。
单击“框架网页”按钮,选择“框架”选项卡,把“显示边界”复选框中的对钩去掉,单击“确定”返回。
这时再用浏览器浏览此页面,就看不到框架的边界了。
5、在同一页面不同位置跳转?
要想在同一页面的不同位置跳转,比如在页面的最后有“返回顶端”几个字,点击这四个字可以跳到本页面顶端,可以利用书签的方法。
先在页面的开始位置加入一个书签。选择“插入”菜单下的“书签”命令,在弹出的对话框中输入书签的名字,比如“top”,单击“确定”,在页面开始出现了个书签标志。
在页面的最后输入“返回顶端”,选中这向个字,按下CTRL+K键,弹出“创建超链”对话框。在“书签”下拉列表中选择刚才所建的书签“top”,单击“确定”,超级链接加完了。
接下来预览此网页,点一下刚创建的超链接,就跳到页首了。 用此方法同样可以做到从一页面跳转到另一页面的某个位置,只不过是先选“目标框架”,然后再制作“书签”罢了。
6、怎样插入竖直线
我们都知道用 <hr> 可以插入一条水平线,但如何插入一条竖直线呢?
我们既可以利用插入表格的方法,也可以利用 <hr> 的方法。
先看看用 <hr> 方法插入竖直线。建立一个表格,然后在某一单元格内插入一条水平线,然后将此线选中,单击鼠标右键,选择“水平线属性”命令,将其宽度设为1个像素,高度为100像素,一条高为100像素的垂直线就出来了。
如果想要更长的线,只将高度设大是没用的,不信你试试,设置高度为200,但在 浏览器中只能看到100像素高。这是因为HTML只承认100像素高的水平线。这时你可以加回车键,然后再画一条同样的水平线,或者在竖直方向上的两个单元格内都加一条同样的水平线。我们还可以改变线的颜色,以达到不同的效果。
第二个办法也很简单,就是在一个表格中,单击鼠标右键,选“表格属性”,设置表格的单元格边距和间距均为0。
再单击鼠标右键,选“单元格属性”,设置某一单元格的指定宽度为1个像素,高度为100个像素,并设置合适的背景色。
7、如何去掉超链接的下划线?
我们可以用CSS语法来控制超链接的形式、颜色变化。
下面我们做一个这样的链接:未被点击时超链接文字无下划线,显示为蓝色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划线,显示为绿色。
实现方法很简单,在源代码的<head>和<head>之间加上如下的CSS语法控制:
<style type="text/css">
<!--
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
-->
</style>
其中:
a:link 指正常的未被访问过的链接;
a:active 指正在点的链接;
a:hover 指鼠标在链接上;
a:visited 指已经访问过的链接;
text-decoration是文字修饰效果的意思;
none参数表示超链接文字不显示下划线;
underline参数表示超链接的文字有下划线
下面这行文字就是我们刚才做的效果。
效果演示
同样,如果讲none替换成overline则给超链接文字加上划线,换成line-through给超链接文字加上删除线,blink则使文字在闪烁。

8、给图形增加一个缩略图
如果网络速度比较慢,可以给图片增加一个缩略图,快速地显示图片的概图。缩略图是指把原图像按比例缩小,作为原图的预览,即当访问者点击一个到图片的链接后,在图片下载的过程中,网页上首先出现图片的略图,直至原图全部出现。
下面我们看一下在FrontPage中如何完成这样的功能。首先制作缩略图,这可以在imageready等图形软件中制作一个缩略图,并保存到相应的目录中。
在FrontPage中插入图片,然后单击鼠标右键,选“图片属性”。选择“常规”选项卡,单击“替代表示”栏中的“浏览”按钮,找到刚才所制作的缩略图jq-pc0.gif,也可以在“文本”栏中填入相应的说明文字。
单击“确定”按钮,完成此操作。
9、强制页面重新载入
如果想别人在看你的主页时,每次都刷新,而不是读取缓存里旧的数据,可以这样来做。
用鼠标右键单击页面,选择“页面属性”,弹出“网页属性”对话框。单击“自定义”选项卡 ,这里并没有我们要的功能。
点“添加”按钮,弹出“系统Meta变量”对话框,输入一个变量,“名称”为“Pragma”,“值”为“no-cache”,单击“确定”。
这样在网页的中就加入下面这样的HTML源代码:
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
这样每次浏览此页时,浏览器浏览信息时必须从服务器中读取。
10、如何禁用JavaScript
从动画到应用程序,站点内的各种对象都可以使用 JavaScript。但有些浏览器并不支持 JavaScript,所以有时访问者在查看包含Javacritp的网页时可能无法正确显示,或者会包含错误。
我们在用FrontPage制作网页时,可以将站点设置为与特定的浏览器兼容或是与某种技术兼容。比如我们可以禁止 JavaScript,或将我们所制作的站点设置为与不支持 JavaScript 的浏览器兼容,甚至将FrontPage 菜单上有关插入或使用 JavaScript 的命令设置无效 (菜单会变成灰色) 。
如何设置呢?单击“工具”菜单,选择“网页选项” 然后单击 “兼容性” 选项卡。 要禁止JavaScript,就取消“JavaScript”复选框,单击“确定”,设置就完成了。
同样,您还可以启用或禁用ActiveX控件、动态HTML,或者CSS等。

返回本页首

网页制作技巧

以下几项摘编自 《计算机应用文摘》2000.2-128页

## 1. 自动连接
在预定时间后自动连入另一个指定的页面。
方法:
在<title>...</title>中加入以下一行:
<meta http-equiv="refresh" content="10;url=otherpage.htm">
其中10代表10秒后自动连接。
## 2. 提前载入图片
若要载入的图片过多时,可在前一页中提前载入下一页的图片。
加入以下一行:
<img src="image.jpg" width=0 height=0>
## 3. 浮动背景
当你拉住下拉条时,背景不动。(会使浏览速度减慢:-( )
加入:
<body background="#FFFFFF" bgproperties="fixed">
## 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">
<!--
a {text-decoration: none}
a:hover {color: red;text-decoration:underline}
-->
</script>
## 5. 自动换行
在主页中自动换行以适应不同的浏览器或分辨率。
(在FrontPage98中已自动加入)
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312"
## 6. 移动文字
这在主页上是常用的,其制作方法很简单。
<marquee>要移动的文字</marquee>
1. 移动的方向:<direction=!> !=left,right
2. 移动的方式:<bihavior=!> !=scroll,side,alternate
3. 循环次数:<loop=!> !=次数。若未指定则循环不止。
4。 循环速度:<scrollamount=!> !=数字

单词在线翻译

/ <form action="http://ciba.kingsoft.net/cgi-bin/porf12.cgi"
<form action="http://www.iciba.net/cgi-bin/porf12.cgi"
method="post">
<div align="center"><center><p><font color="#0000FF"><br>
</font><font color="#000000">金山词霸在线版</font>
<font color="#0000FF">
<input name="terms" size="10"><br>
<input type="submit" value="开始查询" name="submit"><br>
</font></p></center></div></form>

软件查询
<FORM action=http://www.ohinternet.com/cgi-bin/sandi.cgi
method=get target=_blank>
<P><SPAN style="FONT-SIZE: 9pt"><FONT color=#000000><A
target=_blank
href="http://www.worldfax.net/webnew/search1.htm">

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值