抓虾帮你轻松订阅、收藏、分享博客和新闻等。
订阅
关闭
网页设计吧 - 实例技巧
我不能选择那最好的。是那最好的选择我。
网页制作技巧:
1.消除用Netscape编制的网页中的乱码
2.如何改变字的颜色
3.设置网页的背景图像
4.如何去掉主页超链接的下划线?
5.DreamWeaver中如何防止出现重叠现象
6.中文网页制作中段落缩进的方法
7.如何调整表格高度
8.超级链接时如何设定目标窗口
9.如何实现文字的自动换行
10.如何制作H...
1.消除用Netscape编制的网页中的乱码
2.如何改变字的颜色
3.设置网页的背景图像
4.如何去掉主页超链接的下划线?
5.DreamWeaver中如何防止出现重叠现象
6.中文网页制作中段落缩进的方法
7.如何调整表格高度
8.超级链接时如何设定目标窗口
9.如何实现文字的自动换行
10.如何制作H...
网页制作技巧:
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.绝对去掉广告的方法!
--------------------------------------------------------------------------------
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 onmouseover = "this.className = \'normal\'"
onmouseout = "this.className=\'start\'" class=start> here </SPAN>
这里的“class=start”是将这行字的默认值设为 start {color:blue;},要是不加上这句的话,你这行字的颜色就会变成HTML预先设定的数值。
链接字变色:
<style>
<!--
Alink {
COLOR: #336699; TEXT-DECORATION: none
}
Avisited {
COLOR: #999999; TEXT-DECORATION: none
}
A:hover {
COLOR: #ff9900; TEXT-DECORATION: none;
}
-->
</style>
把A:hover 放在最后是为了点击后Aivsited 的颜色盖去A:hover 的颜色。
3.设置网页的背景图像
网页的背景色和背景图选择得好,会是页面增色不少。如果选取单一的背景色,难免显得单调,如果选择整个图片做背景,由于图片本身的文件大,造成网页的加载时间长,一般用户很难有耐性等待下去。那么带背景的网页是如何制作出来的?
一般是采用一幅很小的图片,然后铺展开,形成很漂亮的背景。对背景图的要求当然是越漂亮越好,文件越小越好。
<BODY BACKGROUND="images/back001.gif" BGCOLOR="#FFFFFF" >
<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或其它的浏览器时,发现图形位置错位或者覆盖文字,这大大影响了网页的效果。
(不好意思哈,这里有两幅图的,在写字板里弄不出来)
那么怎样改变上面出现的不正常的情况呢?很简单,我们查看以下源程序,发现上面一段的源程序是这样的:
<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 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时可以隐藏面板
ALIGN="TOP / BOTTOM / CENTER / BASELINE / LEFT /
RIGHT / TEXTTOP / MIDDLE / ABSMIDDLE /
ABSBOTTOM"
设定控制面板和旁边文字的对齐方式,跟(插入图形的标记)所使用的属性是一样的
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" onChange="change(this.form)" 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" 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文件的“<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()是一个函数,在下一步中将要定义它,我们分别在“电脑交互教程”的链接中加入“onMouseOver="swap(1)"”,在“共享软件下载”的链接中加入“onMouseOver="swap(2)"”,在“硬件追踪”的链接中加入“onMouseOver="swap(3)"”;
3、在html文件的“<head>”中添加如下JavaScript语句:
好,做完以上的工作,我们在浏览器中就能看到如前面所示的效果了。提醒你的是并不是所有的浏览器都支持此效果,另外在你加入JavaScript语句的时候一定要注意区分大小写噢。你也可以利用此技巧的原理为网页增添其它的JnMouseOver响应效果。
20.显示日期和跳动的时间
现在很多网页上都有一个区域显示日期、时间和星期,许多网友问这是怎么实现的呢?下面给出一个实现的方法,最终的效果请看下面演示:
今天是: 2004年4月29日星期四 现在时间:0:22:19 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>中加入 onload="startclock();" 语句:
<body onLoad="startclock();">
下面是详细的步骤,我们来具体做一下吧。
1、显示日期和星期:
我们可以在页面的任意位置显示当前的日期和星期,我们把下面一段JavaScript代码插入到要显示日期的地方即可,需要注意的是,必须为显示区留出足够的位置,不然有可能在浏览时发生折行而影响美观;
2、显示不断跳动的时间:
虽然我们很容易从系统读取时间并把它显示出来,但如果我们不采用一定的技巧,显示出的时间只能是网页打开时的时间,它是固定不变的。这里我们来实现一个不断随系统时间变化的时钟。
第一步先在要显示时间的地方插入一个文本框TextField并命名为tt(一定要注意大小写哦),它的作用是作为时间输出的对象,我们在JavaScript中将timeValue值赋给tt.value,也就是随时改变文本框的显示值来动态显示时间;
第二步在<head>中插入如下的JavaScript代码,这段代码的作用是每隔一秒读取一次系统时间,然后将它在文本框中显示;
第三步在<body>中添入“onload="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 onload="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>之间加入“onload="scroller();"”语句,它的意思是页面加载时即调用scroller()函数。
2、循环滚动的公告窗口实现起来稍微要复杂一些,首先插入公告窗口<head>与</head>之间的JavaScript代码要做修改,如下面所示:
然后在公告窗口的<body>中加入“onload="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.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 onload="scroll();">
实现步骤:
(1)首先将JavaScript代码复制到<head>与</head>之间,这段代码中包含了scroll()函数,它是实现跑马灯的主体代码。我们可以修改mes[]数组的值来改变跑马灯的内容,你也可以显示更多条的信息,不过代码中i的值应等于信息的条数,也就是等于mes[]数组的维数;
(2)然后在<body>标签中加入onload()语句即可。
2、超链接的跑马灯式提示信息
把你的“老鼠”移到下面链接上试一试,有什么不同呢?原来弹出了一条跑马灯式的提示信息,这是怎么实现的呢,请接着看:
跑马灯大全(一) 电脑交互教程 网页制作技巧技巧
源码粘贴框:
1.将下面代码放在<body>标签下:
<script>
if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){
if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML=\'<marquee style="border:1px solid black">\'+text+\'</marquee>\'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}
else if (document.layers){
document.tooltip2.document.nstip.document.write(\'<b>\'+text+\'</b>\')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}
function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}
</script>
2.然后在要出现提示信息的链接中,添加onMouseover语句:
<a href="pm23.htm" onMouseover="showtip2(this,event,\'用marquee实现的各式跑马灯\')" onMouseout="hidetip2()">跑马灯大全(一)</a>
<a href="/pc/index.htm" onMouseover="showtip2(this,event,\'最多最全的电脑交互教程\')" onMouseout="hidetip2()">电脑交互教程</a>
<a href="pmjq00.htm" onMouseover="showtip2(this,event,\'点滴技巧装扮你的家\')" onMouseout="hidet
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.绝对去掉广告的方法!
--------------------------------------------------------------------------------
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 onmouseover = "this.className = \'normal\'"
onmouseout = "this.className=\'start\'" class=start> here </SPAN>
这里的“class=start”是将这行字的默认值设为 start {color:blue;},要是不加上这句的话,你这行字的颜色就会变成HTML预先设定的数值。
链接字变色:
<style>
<!--
Alink {
COLOR: #336699; TEXT-DECORATION: none
}
Avisited {
COLOR: #999999; TEXT-DECORATION: none
}
A:hover {
COLOR: #ff9900; TEXT-DECORATION: none;
}
-->
</style>
把A:hover 放在最后是为了点击后Aivsited 的颜色盖去A:hover 的颜色。
3.设置网页的背景图像
网页的背景色和背景图选择得好,会是页面增色不少。如果选取单一的背景色,难免显得单调,如果选择整个图片做背景,由于图片本身的文件大,造成网页的加载时间长,一般用户很难有耐性等待下去。那么带背景的网页是如何制作出来的?
一般是采用一幅很小的图片,然后铺展开,形成很漂亮的背景。对背景图的要求当然是越漂亮越好,文件越小越好。
<BODY BACKGROUND="images/back001.gif" BGCOLOR="#FFFFFF" >
<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或其它的浏览器时,发现图形位置错位或者覆盖文字,这大大影响了网页的效果。
(不好意思哈,这里有两幅图的,在写字板里弄不出来)
那么怎样改变上面出现的不正常的情况呢?很简单,我们查看以下源程序,发现上面一段的源程序是这样的:
<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 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时可以隐藏面板
ALIGN="TOP / BOTTOM / CENTER / BASELINE / LEFT /
RIGHT / TEXTTOP / MIDDLE / ABSMIDDLE /
ABSBOTTOM"
设定控制面板和旁边文字的对齐方式,跟(插入图形的标记)所使用的属性是一样的
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" onChange="change(this.form)" 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" 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文件的“<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()是一个函数,在下一步中将要定义它,我们分别在“电脑交互教程”的链接中加入“onMouseOver="swap(1)"”,在“共享软件下载”的链接中加入“onMouseOver="swap(2)"”,在“硬件追踪”的链接中加入“onMouseOver="swap(3)"”;
3、在html文件的“<head>”中添加如下JavaScript语句:
好,做完以上的工作,我们在浏览器中就能看到如前面所示的效果了。提醒你的是并不是所有的浏览器都支持此效果,另外在你加入JavaScript语句的时候一定要注意区分大小写噢。你也可以利用此技巧的原理为网页增添其它的JnMouseOver响应效果。
20.显示日期和跳动的时间
现在很多网页上都有一个区域显示日期、时间和星期,许多网友问这是怎么实现的呢?下面给出一个实现的方法,最终的效果请看下面演示:
今天是: 2004年4月29日星期四 现在时间:0:22:19 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>中加入 onload="startclock();" 语句:
<body onLoad="startclock();">
下面是详细的步骤,我们来具体做一下吧。
1、显示日期和星期:
我们可以在页面的任意位置显示当前的日期和星期,我们把下面一段JavaScript代码插入到要显示日期的地方即可,需要注意的是,必须为显示区留出足够的位置,不然有可能在浏览时发生折行而影响美观;
2、显示不断跳动的时间:
虽然我们很容易从系统读取时间并把它显示出来,但如果我们不采用一定的技巧,显示出的时间只能是网页打开时的时间,它是固定不变的。这里我们来实现一个不断随系统时间变化的时钟。
第一步先在要显示时间的地方插入一个文本框TextField并命名为tt(一定要注意大小写哦),它的作用是作为时间输出的对象,我们在JavaScript中将timeValue值赋给tt.value,也就是随时改变文本框的显示值来动态显示时间;
第二步在<head>中插入如下的JavaScript代码,这段代码的作用是每隔一秒读取一次系统时间,然后将它在文本框中显示;
第三步在<body>中添入“onload="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 onload="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>之间加入“onload="scroller();"”语句,它的意思是页面加载时即调用scroller()函数。
2、循环滚动的公告窗口实现起来稍微要复杂一些,首先插入公告窗口<head>与</head>之间的JavaScript代码要做修改,如下面所示:
然后在公告窗口的<body>中加入“onload="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.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 onload="scroll();">
实现步骤:
(1)首先将JavaScript代码复制到<head>与</head>之间,这段代码中包含了scroll()函数,它是实现跑马灯的主体代码。我们可以修改mes[]数组的值来改变跑马灯的内容,你也可以显示更多条的信息,不过代码中i的值应等于信息的条数,也就是等于mes[]数组的维数;
(2)然后在<body>标签中加入onload()语句即可。
2、超链接的跑马灯式提示信息
把你的“老鼠”移到下面链接上试一试,有什么不同呢?原来弹出了一条跑马灯式的提示信息,这是怎么实现的呢,请接着看:
跑马灯大全(一) 电脑交互教程 网页制作技巧技巧
源码粘贴框:
1.将下面代码放在<body>标签下:
<script>
if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){
if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML=\'<marquee style="border:1px solid black">\'+text+\'</marquee>\'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}
else if (document.layers){
document.tooltip2.document.nstip.document.write(\'<b>\'+text+\'</b>\')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}
function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}
</script>
2.然后在要出现提示信息的链接中,添加onMouseover语句:
<a href="pm23.htm" onMouseover="showtip2(this,event,\'用marquee实现的各式跑马灯\')" onMouseout="hidetip2()">跑马灯大全(一)</a>
<a href="/pc/index.htm" onMouseover="showtip2(this,event,\'最多最全的电脑交互教程\')" onMouseout="hidetip2()">电脑交互教程</a>
<a href="pmjq00.htm" onMouseover="showtip2(this,event,\'点滴技巧装扮你的家\')" onMouseout="hidet
展开
发给朋友
发给朋友
转到小组
转到小组
(打标签)
(打标签)
收藏
已藏
推荐
已荐
让你的内容表格不因被撑破而变形
查看全文
2006-09-04 22:19:37
有时候我们在添加内容时,由于图片宽度过大,或者其他原因会把网页撑变形,样子很难看。如何让表格不变形呢?
把这个代码加到内容的TABLE中就可以了!
style="TABLE-LAYOUT: fixed"
例如,找到文章内容页模板content.html,找到以下代码
<table width="100%&quo...
把这个代码加到内容的TABLE中就可以了!
style="TABLE-LAYOUT: fixed"
例如,找到文章内容页模板content.html,找到以下代码
<table width="100%&quo...
有时候我们在添加内容时,由于图片宽度过大,或者其他原因会把网页撑变形,样子很难看。如何让表格不变形呢?
把这个代码加到内容的TABLE中就可以了!
style="TABLE-LAYOUT: fixed"
例如,找到文章内容页模板content.html,找到以下代码
<table width="100%" align="center" cellpadding="0" cellspacing="0">
替换为以下内容
<table style="TABLE-LAYOUT: fixed" width="100%" align="center" cellpadding="0" cellspacing="0">
把这个代码加到内容的TABLE中就可以了!
style="TABLE-LAYOUT: fixed"
例如,找到文章内容页模板content.html,找到以下代码
<table width="100%" align="center" cellpadding="0" cellspacing="0">
替换为以下内容
<table style="TABLE-LAYOUT: fixed" width="100%" align="center" cellpadding="0" cellspacing="0">
展开
发给朋友
发给朋友
转到小组
转到小组
(打标签)
(打标签)
收藏
已藏
推荐
已荐
小偷程序原理和简单示例
查看全文
2006-09-04 12:40:59
现在网上流行的小偷程序比较多,有新闻类小偷,音乐小偷,下载小偷,那么它们是如何做的呢,下面我来做个简单介绍,希望对各位站长有所帮助。
(一)原理
小偷程序实际上是通过了XML中的XMLHTTP组件调用其它网站上的网页。比如新闻小偷程序,很多都是调用了sina的新闻网页,并且对其中的html进行了一些替换,同时对广告也进行了过滤。用小偷程序的优点有:无须维护网站,因为小偷程序中的数据来自其他网站,它将随着该网站的更新而更新;可以节省服务器资源,一般小偷程序就几个文件,所有网页内容都是...
(一)原理
小偷程序实际上是通过了XML中的XMLHTTP组件调用其它网站上的网页。比如新闻小偷程序,很多都是调用了sina的新闻网页,并且对其中的html进行了一些替换,同时对广告也进行了过滤。用小偷程序的优点有:无须维护网站,因为小偷程序中的数据来自其他网站,它将随着该网站的更新而更新;可以节省服务器资源,一般小偷程序就几个文件,所有网页内容都是...
现在网上流行的小偷程序比较多,有新闻类小偷,音乐小偷,下载小偷,那么它们是如何做的呢,下面我来做个简单介绍,希望对各位站长有所帮助。
(一)原理
小偷程序实际上是通过了XML中的XMLHTTP组件调用其它网站上的网页。比如新闻小偷程序,很多都是调用了sina的新闻网页,并且对其中的html进行了一些替换,同时对广告也进行了过滤。用小偷程序的优点有:无须维护网站,因为小偷程序中的数据来自其他网站,它将随着该网站的更新而更新;可以节省服务器资源,一般小偷程序就几个文件,所有网页内容都是来自其他网站。缺点有:不稳定,如果目标网站出错,程序也会出错,而且,如果目标网站进行升级维护,那么小偷程序也要进行相应修改;速度,因为是远程调用,速度和在本地服务器上读取数据比起来,肯定要慢一些。
(二)事例
下面就XMLHTTP在ASP中的应用做个简单说明
<%
'常用函数
'1、输入url目标网页地址,返回值getHTTPPage是目标网页的html代码
function getHTTPPage(url)
dim Http
set Http=server.createobject("MSXML2.XMLHTTP")
Http.open "GET",url,false
Http.send()
if Http.readystate<>4 then
exit function
end if
getHTTPPage=bytesToBSTR(Http.responseBody,"GB2312")
set http=nothing
if err.number<>0 then err.Clear
end function
'2、转换乱玛,直接用xmlhttp调用有中文字符的网页得到的将是乱玛,可以通过adodb.stream组件进行转换
Function BytesToBstr(body,Cset)
dim objstream
set objstream = Server.CreateObject("adodb.stream")
objstream.Type = 1
objstream.Mode =3
objstream.Open
objstream.Write body
objstream.Position = 0
objstream.Type = 2
objstream.Charset = Cset
BytesToBstr = objstream.ReadText
objstream.Close
set objstream = nothing
End Function
'下面试着调用http://www.3doing.com/earticle/的html内容
Dim Url,Html
Url="http://www.3doing.com/earticle/"
Html = getHTTPPage(Url)
Response.write Html
%>
(一)原理
小偷程序实际上是通过了XML中的XMLHTTP组件调用其它网站上的网页。比如新闻小偷程序,很多都是调用了sina的新闻网页,并且对其中的html进行了一些替换,同时对广告也进行了过滤。用小偷程序的优点有:无须维护网站,因为小偷程序中的数据来自其他网站,它将随着该网站的更新而更新;可以节省服务器资源,一般小偷程序就几个文件,所有网页内容都是来自其他网站。缺点有:不稳定,如果目标网站出错,程序也会出错,而且,如果目标网站进行升级维护,那么小偷程序也要进行相应修改;速度,因为是远程调用,速度和在本地服务器上读取数据比起来,肯定要慢一些。
(二)事例
下面就XMLHTTP在ASP中的应用做个简单说明
<%
'常用函数
'1、输入url目标网页地址,返回值getHTTPPage是目标网页的html代码
function getHTTPPage(url)
dim Http
set Http=server.createobject("MSXML2.XMLHTTP")
Http.open "GET",url,false
Http.send()
if Http.readystate<>4 then
exit function
end if
getHTTPPage=bytesToBSTR(Http.responseBody,"GB2312")
set http=nothing
if err.number<>0 then err.Clear
end function
'2、转换乱玛,直接用xmlhttp调用有中文字符的网页得到的将是乱玛,可以通过adodb.stream组件进行转换
Function BytesToBstr(body,Cset)
dim objstream
set objstream = Server.CreateObject("adodb.stream")
objstream.Type = 1
objstream.Mode =3
objstream.Open
objstream.Write body
objstream.Position = 0
objstream.Type = 2
objstream.Charset = Cset
BytesToBstr = objstream.ReadText
objstream.Close
set objstream = nothing
End Function
'下面试着调用http://www.3doing.com/earticle/的html内容
Dim Url,Html
Url="http://www.3doing.com/earticle/"
Html = getHTTPPage(Url)
Response.write Html
%>
展开
发给朋友
发给朋友
转到小组
转到小组
(打标签)
(打标签)
收藏
已藏
推荐
已荐
logo制作全过程演示
查看全文
2006-09-02 20:41:35
应广大网友要求,为大家展示一下一个完整logo的设计过程.考虑到有的logo制作复杂,用文本演示起来及其复杂繁琐,也不适合初学者,这里仅为大家演示一个简单,明了的制作过程,希望大家支持,有错误及不适当的地方希望回帖指正.
这里以刚为网友fanbojack 做的心情工作室为例。制作软件:fireworks4
1) 新建一个88*31的文档,画布颜色为透明.如图
2) 导入一个已准备好的图片(最好跟文档大小相同,这里为88*31).效果如图2,没有边框,很不美观.
这里以刚为网友fanbojack 做的心情工作室为例。制作软件:fireworks4
1) 新建一个88*31的文档,画布颜色为透明.如图
2) 导入一个已准备好的图片(最好跟文档大小相同,这里为88*31).效果如图2,没有边框,很不美观.
应广大网友要求,为大家展示一下一个完整logo的设计过程.考虑到有的logo制作复杂,用文本演示起来及其复杂繁琐,也不适合初学者,这里仅为大家演示一个简单,明了的制作过程,希望大家支持,有错误及不适当的地方希望回帖指正.
这里以刚为网友fanbojack 做的心情工作室为例。制作软件:fireworks4
1) 新建一个88*31的文档,画布颜色为透明.如图
2) 导入一个已准备好的图片(最好跟文档大小相同,这里为88*31).效果如图2,没有边框,很不美观.
3)下面为图片添加边框.
在工具栏里选择矩形工具画一个88*31的矩(注意矩形和图片的坐标都为0,0)形,内部填充颜色禁止,边框填充颜色为黑色. 设置及效果如图.
4)为logo添加文字(这里以心情工作室为例),字体为宋体,大小12.然后在效果面板(effect面板)和填充面板(fill面板)里为字体设置描边效果.具体设置及效果如下图:
5)添加7个新帧,并将以上做好的矩形边框,图片,文字复制粘贴到每一帧,注意坐标不要变.
6)为图象添加半透明移动path,使logo看起来有动感,活力.
在第二帧上操作:选择圆形工具,边框填充颜色禁止,内部填充颜色为白色,fill面板属性如图. 然后从左到右依次粘贴到3--7帧.如图,这里只选择了3帧.
这里以刚为网友fanbojack 做的心情工作室为例。制作软件:fireworks4
1) 新建一个88*31的文档,画布颜色为透明.如图

2) 导入一个已准备好的图片(最好跟文档大小相同,这里为88*31).效果如图2,没有边框,很不美观.

3)下面为图片添加边框.
在工具栏里选择矩形工具画一个88*31的矩(注意矩形和图片的坐标都为0,0)形,内部填充颜色禁止,边框填充颜色为黑色. 设置及效果如图.


4)为logo添加文字(这里以心情工作室为例),字体为宋体,大小12.然后在效果面板(effect面板)和填充面板(fill面板)里为字体设置描边效果.具体设置及效果如下图:



5)添加7个新帧,并将以上做好的矩形边框,图片,文字复制粘贴到每一帧,注意坐标不要变.
6)为图象添加半透明移动path,使logo看起来有动感,活力.
在第二帧上操作:选择圆形工具,边框填充颜色禁止,内部填充颜色为白色,fill面板属性如图. 然后从左到右依次粘贴到3--7帧.如图,这里只选择了3帧.




7)将第八帧的帧延迟时间设为50,其他不变.
至此,logo设计完成,点文档下面的播放按钮,看看,精美的logo设计是不是就这么简单?
最后效果图如下:

展开
发给朋友
发给朋友
转到小组
转到小组
(打标签)
(打标签)
收藏
已藏
推荐
已荐
纯ASP代码之公历转农历实现(含属相)--例子代码
查看全文
2006-09-01 16:46:45
<!--#include File="clsDay.asp"-->
<%
Dim objChinaDay
Dim sDay, sWeekDay, sChinaDay, sChinaYear,sChinaAni
Set objChinaDay = New ChinaDay
Call objChinaDay.Action("",sDay,sWeekDay,sChinaYear,sChinaDay,sChinaAni)
Set objChinaDa...
<%
Dim objChinaDay
Dim sDay, sWeekDay, sChinaDay, sChinaYear,sChinaAni
Set objChinaDay = New ChinaDay
Call objChinaDay.Action("",sDay,sWeekDay,sChinaYear,sChinaDay,sChinaAni)
Set objChinaDa...
<!--#include File="clsDay.asp"-->
<%
Dim objChinaDay
Dim sDay, sWeekDay, sChinaDay, sChinaYear,sChinaAni
Set objChinaDay = New ChinaDay
Call objChinaDay.Action("",sDay,sWeekDay,sChinaYear,sChinaDay,sChinaAni)
Set objChinaDay = Nothing
'Response.Write sDay&"<BR>"
'Response.Write sWeekDay&"<BR>"
'Response.Write sChinaYear&"<BR>"
'Response.Write sChinaDay&"<BR>"
'Response.Write sChinaAni&"<BR>"
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>农历日历</title>
<style>
.itm {font-family: 宋体; font-size: 14px;}
.chn {font-family: 宋体; font-size: 12px}
.chnred {font-family: 宋体; color: #FF0000; font-size: 12px}
.chnblue {font-family: 宋体; color: #0000FF; font-size: 12px}
</style>
</head>
<body bgcolor="#FFFFFF">
<!--显示站点日历-->
<table border="1" cellspacing="1" width="110" bgcolor="#EAEAEA" bordercolor="#FFFFFF"
bordercolorlight="#000000">
<tr> <td><center><table>
<tr>
<td class="chnblue" align="center" valign="middle"><%=sDay%>
</td>
</tr>
<tr>
<td class="chnred" align="center" valign="middle"><%=sWeekDay%>
</td>
</tr>
<tr>
<td class="chnblue" align="center" valign="middle"><%=sChinaYear & "(" & sChinaAni & ")"%>
</td>
</tr>
<tr>
<td class="chnred" align="center" valign="middle"><%=sChinaDay%>
</td>
</tr>
</td>
</tr>
</table>
</table>
</body>
</html>
<%
Dim objChinaDay
Dim sDay, sWeekDay, sChinaDay, sChinaYear,sChinaAni
Set objChinaDay = New ChinaDay
Call objChinaDay.Action("",sDay,sWeekDay,sChinaYear,sChinaDay,sChinaAni)
Set objChinaDay = Nothing
'Response.Write sDay&"<BR>"
'Response.Write sWeekDay&"<BR>"
'Response.Write sChinaYear&"<BR>"
'Response.Write sChinaDay&"<BR>"
'Response.Write sChinaAni&"<BR>"
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>农历日历</title>
<style>
.itm {font-family: 宋体; font-size: 14px;}
.chn {font-family: 宋体; font-size: 12px}
.chnred {font-family: 宋体; color: #FF0000; font-size: 12px}
.chnblue {font-family: 宋体; color: #0000FF; font-size: 12px}
</style>
</head>
<body bgcolor="#FFFFFF">
<!--显示站点日历-->
<table border="1" cellspacing="1" width="110" bgcolor="#EAEAEA" bordercolor="#FFFFFF"
bordercolorlight="#000000">
<tr> <td><center><table>
<tr>
<td class="chnblue" align="center" valign="middle"><%=sDay%>
</td>
</tr>
<tr>
<td class="chnred" align="center" valign="middle"><%=sWeekDay%>
</td>
</tr>
<tr>
<td class="chnblue" align="center" valign="middle"><%=sChinaYear & "(" & sChinaAni & ")"%>
</td>
</tr>
<tr>
<td class="chnred" align="center" valign="middle"><%=sChinaDay%>
</td>
</tr>
</td>
</tr>
</table>
</table>
</body>
</html>
展开
发给朋友
发给朋友
转到小组
转到小组
(打标签)
(打标签)
收藏
已藏
推荐
已荐