发新话题
打印

【网站】网页制作技巧

【网站】网页制作技巧

小技巧:如果系统盘空间不足,可以将.ttf文件存放在D盘,或者E盘,在C盘的windows\\fonts目录下,选择文件菜单、安装新字体、将字体复制到font文件夹前的勾去了,然后再用浏览指向到D盘的.ttf文件,这样存放在Fonts目录下的字体仅是一个快捷方式,省却了空间的容量。



去除水平滚动条的代码如下:
<body style=\'overflow:scroll;overflow-x:hidden\'>
</body>




网页制作技巧:(这是标题,具体内容看下面的楼层)

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形式发送
29.绝对去掉广告的方法!
30.在网页中嵌入media播放器
31.怎么才能给自己的主页加一个百度搜索引擎
32.网页制作教程(十二)自动显示最后更新时间
33.在状态栏加跑马灯。
34.如何如掉网易广告?
35.网站flash制作技巧
36.关于版权声明的写法
37.网页中插入音频视频文件的代码
38.关于弹出窗口的制作
39.防止另存网页
40.如何实现网页中的背景条纹
41.嵌入网页
42.禁止右键
43.如何控制横向和纵向滚动条的显隐?
44.加入注释的格式
45.怎样在网页中加入 E-mail 链接并显示预定的主题?  
46.添加到收藏夹:    
47.设为首页:
48.定制浏览器地址栏前的小图标
49.把滚动条放在浏览器窗口的左边
50.跳转
51.滚动
52.让背景图不滚动
53.让IFRAME框架内的文档的背景透明
54.返回页首
55.如何实现鼠标移上后单元格颜色变化?
56.用透明FLASH做背景
57.定制滚动条颜色
58.页面转换特效[推荐 ]
59.禁止查看源代码
60.自动滚屏[推荐]
61.保护自己的页面不被别人放在框架中
62.如何使同一页中的超文本链接呈现不同的颜色
63.各种媒体播放html代码
64.鼠标放上链接时文字下显示虚线的办法
65.鼠标移上链接时显示说明文字的方法
66.鼠标移上时表格变色方法
67.如何在网页中显示最新更新时间?
1.消除用Netscape编制的网页中的乱码
解决这一问题的方法其实很简单,我们只须在网页的源文件的<head>栏内加入下面的命令:

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

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

2.如何改变字的颜色
当MOUSE移上去是一种颜色,移开就是另外一种颜色:
只需要在Head内预先定义两个类,分别定义了两种颜色:
<style>
   .normal {color:red;}
   .start {color:blue;}  
  </style>

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

  <SPAN  
    class=start> here </SPAN>

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

链接字变色:
<style>
<!--
A:link {
COLOR: #336699; TEXT-DECORATION: none
}
A:visited {
COLOR: #999999; TEXT-DECORATION: none
}
A:hover {
COLOR: #ff9900; TEXT-DECORATION: none;  
}
-->
</style>
把A:hover 放在最后是为了点击后A:visited 的颜色盖去A:hover 的颜色。


3.设置网页的背景图像  
网页的背景色和背景图选择得好,会是页面增色不少。如果选取单一的背景色,难免显得单调,如果选择整个图片做背景,由于图片本身的文件大,造成网页的加载时间长,一般用户很难有耐性等待下去。那么带背景的网页是如何制作出来的?
一般是采用一幅很小的图片,然后铺展开,形成很漂亮的背景。对背景图的要求当然是越漂亮越好,文件越小越好。
<BODY BACKGROUND="images/back001.gif" BGCOLOR="#FFFFFF" >
      
<HTML>
   <HEAD>
     <TITLE>欢迎洪恩在线</TITLE>
   </HEAD>
   <BODY BACKGROUND="images/back001.gif" BGCOLOR="#FFFFFF">
     <><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或其它的浏览器时,发现图形位置错位或者覆盖文字,这大大影响了网页的效果。

(不好意思哈,这里有两幅图的,在写字板里弄不出来)


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

  <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属性来设置:
TARGET是链接标签的属性,它的作用就是指定目标窗口,TARGET有以下几个值:

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

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

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

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

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

  <a href="www.hongen.com" target="_blank">洪恩在线</a>  

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

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

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

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

  <table width="760">
    ...
    <table width="60%">
      ...
    </table>
  </table>  

  这里就相当于我们已经给定了内层表格的宽度为760*60%=456个像素点了。  

10 如何制作HTML字幕动画效果  
当然我们可以利用flash或者采用Gif动画来实现,但是这种方式往往占用的空间比较大,而且不如HTML标记来得那么简单。这个标记就是Marquee标记,中文翻译为“跑马灯”。
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标记)  
PS:在底色条上跑动:<marquee bgcolor=#>
   面积(底色条的高和长):<marquee height=# width=# bgcolor=#>
   空白(margins)<hspace=# vspace=#>

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”并单击,这时会弹出一个对话框。
我们一般选择“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像素  


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

  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标签可以实现背景音乐的插入功能,其语法规则如下:(在<body>中插入)

  <EMBED&nbs
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或其它的浏览器时,发现图形位置错位或者覆盖文字,这大大影响了网页的效果。

(不好意思哈,这里有两幅图的,在写字板里弄不出来)


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

  <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属性来设置:
TARGET是链接标签的属性,它的作用就是指定目标窗口,TARGET有以下几个值:

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

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

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

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

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

  <a href="www.hongen.com" target="_blank">洪恩在线</a>  

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

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

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

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

  <table width="760">
    ...
    <table width="60%">
      ...
    </table>
  </table>  

  这里就相当于我们已经给定了内层表格的宽度为760*60%=456个像素点了。  

10 如何制作HTML字幕动画效果  
当然我们可以利用flash或者采用Gif动画来实现,但是这种方式往往占用的空间比较大,而且不如HTML标记来得那么简单。这个标记就是Marquee标记,中文翻译为“跑马灯”。
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标记)  
PS:在底色条上跑动:<marquee bgcolor=#>
   面积(底色条的高和长):<marquee height=# width=# bgcolor=#>
   空白(margins)<hspace=# vspace=#>

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”并单击,这时会弹出一个对话框。
我们一般选择“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像素  


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

  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标签可以实现背景音乐的插入功能,其语法规则如下:(在<body>中插入)

  <EMBED&nbs

TOP

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浏览器可能没有此种效果)。如果你喜欢手写代码,那你把表格的属性做相应修改即可。此表格的源代码如下:

<table width="25%" border="1" cellspacing="0" cellpadding="1" bordercolorlight="#cc0066"  
bordercolordark="#ffffff" bgcolor="#ff66cc" align="center">
|
(插入内容)

</table>

16.定制站点导航条
很多网站都有“站点导航条”,通过它能使浏览网站的网友清楚明了的知道网站的结构,并能迅速找到自己感兴趣的内容。
以Dreamwaver为例点击“Insert”菜单->“Form Object”,选择“List/Menu”(插入一个列表菜单)并单击,这时在编辑的网页上便插入一个组件,你也可在“Object”对话框中找到这个组件。如图所示:

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

  <1>打开“Properties”对话框,选择“Type”值为“List(下拉列表)”,然后点击“List Values...”(点击添加条目)下面我们对“List/Menu”组件的属性作如下设置:

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

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

<4>在代码中找到刚才加入的“Select”所对应的语句,然后在图示位置添加一个“onChange”语句,这句话的作用是当我们在站点导航中选择某一站点时,即触发“onChange”事件时调用第5步中我们插入的“change”函数;
    <select name="select"  size="1">
               <option value="pm016.htm">我的站点导航</option>
               <option value="pm015.htm">编程技巧</option>  
               <option value="pm016.htm#1">闪电空间</option>
               <option value="pm016.htm#1">网上学习</option>
               <option value="pm016.htm#1">真情无限</option>
               <option value="pm016.htm#1">笑话乐园</option>
    </select>

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

  源码粘贴框:1.在“select”标签中添加一个“onChange”语句

<select name="select"  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"  class="p2">电脑交互教程</a>
<a href="/pc/softdown/index.htm"  class="p2">共享软件下载</a>
<a href="/pc/hangqing/index.htm"  class="p2">硬件追踪</a>

2.在html文件的“<head>”中添加如下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()是一个函数,在下一步中将要定义它,我们分别在“电脑交互教程”的链接中加入“”,在“共享软件下载”的链接中加入“”,在“硬件追踪”的链接中加入“”;

  3、在html文件的“<head>”中添加如下JavaScript语句:

  好,做完以上的工作,我们在浏览器中就能看到如前面所示的效果了。提醒你的是并不是所有的浏览器都支持此效果,另外在你加入JavaScript语句的时候一定要注意区分大小写噢。你也可以利用此技巧的原理为网页增添其它的JnMouseOver响应效果。

TOP

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

现在很多网页上都有一个区域显示日期、时间和星期,许多网友问这是怎么实现的呢?下面给出一个实现的方法,最终的效果请看下面演示:

今天是: 2004年4月29日星期四  现在时间:019 A.M.   

  源码粘贴框:
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>中加入    语句:

<body >


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

  1、显示日期和星期:


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

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

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



  第三步在<body>中添入“”,这句代码的作用是在网页加载时调用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 >

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>之间加入“”语句,它的意思是页面加载时即调用scroller()函数。

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


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

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


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

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

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

  源码粘贴框:
<script language="JavaScript">
<!--hide script from old browsers
document.write("本页最后更新日期: " + document.lastModified + "")
// end hiding -->
</script>

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

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

本页最后更新日期: 07/10/2000 1437  

  代码中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.substring(0, place);
if (place >= Mes.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 >

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

TOP

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"  >跑马灯大全(一)</a>
<a href="/pc/index.htm"  >电脑交互教程</a>
<a href="pmjq00.htm"  >网页制作技巧技巧</a>

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

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

25.为主页定义热键

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

按下键盘上的“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.onkeypress=backhome;
</script>

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

TOP

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="" >来点击我</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>

好了,现在浏览一下网页,看看效果吧。

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

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

                调查信息  
你的姓名:      
你的Email地址:   
你对网页制作技巧栏目的意见和建议:


发送  重填  
注意:按下“发送”按钮后你填写的内容将以电子邮件方式发送给我们(ketang.pc@goldhuman.com)   
     
这个例子的实现步骤如下:

  先在页面上作一个调查表单,可以参照上面的制作,也可以直接拷贝下面代码粘贴框中的代码到Html的<body>标签内:
<form name="testform" method="OST" action="mailtketang.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属性的电子邮件地址,把它改为你所需要的即可。


29.绝对去掉广告的方法!
只要在你主页的最前面加上  
<script>   
clase();   
</script>   
这个代码就可以了!  
因为广告是在你上传主页的时候网易自动加在你主页的最前面!那么上面那段代码自然就到广告的后面去了哦!所以……呵呵!

30.在网页中嵌入media播放器:  
   将下面这段程序放在<body>....</body>之间  

<div align="center">  
  <table width="405" border="8" cellspacing="5" cellpadding="5" bordercolorlight="#FFFF00">  
    <tr>  
      <td width="672" bordercolor="#FFFFFF" bordercolorlight="#ffff00">  
        <object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" id="mediaplayer1" width="700" height="350">  
         <embed>  
           <param name="SRC" value="aaa.mpa">  
         </embed>  
        </o

TOP

专业制作网站

TOP

发新话题