表格Table各种边框的实现
|
|||||||||
(利用cellspacing1像素间隙和表格与单元格背景的不同) |
|||||||||
(对单元格border的定义) |
|||||||||
|
|||||||||
|
|||||||||
(简单的亮暗边框设置,注意只有IE支持这种效果) |
|||||||||
|
(应用<fieldset>和</legend>标签) |
|||||||||
|
(用CSS为<legnd>定义一个边框) |
|||||||||
|
(在<legnd>中插入一个表格) |
|||||||||
这一节要靠你自己去发现了,因为这样学到的东西才是真正属于自己的(我的一个偷懒的借口)。 我已经在每个表格的下面写出了重点,并在右边给出它的源代码,你可以对照着看。下面还有一 个边框会自己变颜色闪动的表格,有兴趣也研究研究吧 ^o^ |
|||||||||
IE6中如何显示透明PNG图片
PNG图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!
但目前IE中对于插入的透明背景的.png的图片是不能正常显示的。IE会自动给".png"格式的图片加个灰色背景。
解决这个的方法是增加javascript。具体方法如下:
把下面的代码放在head区就可以解决问题了。
以下是引用片段:
<script language="javascript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id=¹" + img.id + "¹ " : ""
var imgClass = (img.className) ? "class=¹" + img.className + "¹ " : ""
var imgTitle = (img.title) ? "title=¹" + img.title + "¹ " : "title=¹" + img.alt + "¹ "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=¹" + img.src + "¹, sizingMethod=¹scale¹);"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
也可以把这段代码单独加在一张图片上:
以下是引用片段:
<span
style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=¹male.png¹,sizingMethod=¹scale¹);"></span >
CSS+DIV实现圆角
方法一:使用"•"来当圆角:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function doResize()
{
document.getElementById("box-contents").style.height=(document.documentElement.clientHeight-60)+"px";
}
window.onresize = doResize;
</script>
<style type="text/css">
body
{
background-color: black;
margin: 0px;
padding: 0px;
color: White;
font: 16px arial;
}
#content
{
margin: auto;
width: 780px;
height: 100%;
padding: 0 0;
}
div.rounded-box
{
position: relative;
background-color: red;
margin: 3px;
width: 780px;
padding: 0 0;
}
/*********************
GLOBAL ATTRIBUTES
*********************/div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
{
position: absolute;
width: 20px;
height: 20px;
background-color: black;
overflow: hidden;
}
div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside
{
position: relative;
font-size: 150px;
font-family: arial;
color: red;
line-height: 40px;
}
/*********************
SPECIFIC ATTRIBUTES
*********************/div.top-left-corner
{
top: 0px;
left: 0px;
}
div.bottom-left-corner
{
bottom: 0px;
left: 0px;
}
div.top-right-corner
{
top: 0px;
right: 0px;
}
div.bottom-right-corner
{
bottom: 0px;
right: 0px;
}
div.top-left-inside
{
left: -8px;
}
div.bottom-left-inside
{
left: -8px;
top: -17px;
}
div.top-right-inside
{
left: -25px;
}
div.bottom-right-inside
{
left: -25px;
top: -17px;
}
div.box-contents
{
position: relative;
padding: 8px;
color: white;
}
</style>
</head>
<body onload="doResize();">
<div id="content">
<span>Header</span>
<div class="rounded-box">
<div class="top-left-corner">
<div class="top-left-inside">
•</div>
</div>
<div class="bottom-left-corner">
<div class="bottom-left-inside">
•</div>
</div>
<div class="top-right-corner">
<div class="top-right-inside">
•</div>
</div>
<div class="bottom-right-corner">
<div class="bottom-right-inside">
•</div>
</div>
<div class="box-contents" id="box-contents">
Contents go here, but it must be at least two lines to look any good.
<br>
Contents go here, but it must be at least two lines to look any good.
<br>
Contents go here, but it must be at least two lines to look any good.
<br>
</div>
<!-- end div.box-contents -->
</div>
<!-- end div.rounded-box -->
<span>Footer</span>
</div>
</body>
</html>
方法二:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
u.corner u
{
height: 1px;
font-size: 1px;
display: block;
overflow: hidden; /*author: meizz*/
text-decoration: none;
background-color: green;
}
u.corner u.h1
{
margin: 0 5px;
}
u.corner u.h2
{
margin: 0 3px;
}
u.corner u.h3
{
margin: 0 2px;
}
u.corner u.h4
{
margin: 0 1px;
height: 2px;
}
</style>
<head>
<body>
<div>
<u class="corner"><u class="h1"></u><u class="h2"></u><u class="h3"></u><u class="h4">
</u></u>
<div style="background-color: green; height: 200">
content</div>
<u class="corner"><u class="h4"></u><u class="h3"></u><u class="h2"></u><u class="h1">
</u></u>
</div>
</body>
</html>
方法三:
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>无标题页</title>
<style>
.up1
{
overflow: hidden;
height: 1px;
margin-left: 4px;
margin-right: 4px;
background-color: Aqua;
border-left: solid 1px Aqua;
border-right: solid 1px Aqua;
}
.up2
{
overflow: hidden;
height: 1px;
margin-left: 3px;
margin-right: 3px;
border-left: solid 1px Aqua;
border-right: solid 1px Aqua;
}
.up3
{
overflow: hidden;
height: 1px;
margin-left: 2px;
margin-right: 2px;
border-left: solid 1px Aqua;
border-right: solid 1px Aqua;
}
.content
{
margin-left: 1px;
margin-right: 1px;
height: 100px; /*这里控件高度*/ /*background-color: Aqua;*/
border-left: solid 1px Aqua;
border-right: solid 1px Aqua;
}
.down1
{
overflow: hidden;
height: 1px;
margin-left: 2px;
margin-right: 2px;
border-left: solid 1px Aqua;
border-right: solid 1px Aqua;
}
.down2
{
overflow: hidden;
height: 1px;
margin-left: 3px;
margin-right: 3px;
border-left: solid 1px Aqua;
border-right: solid 1px Aqua;
}
.down3
{
overflow: hidden;
height: 1px;
margin-left: 4px;
margin-right: 4px;
background-color: Aqua;
border-left: solid 1px Aqua;
border-right: solid 1px Aqua;
}
.cell
{
width: 50px; /*这里控制宽度*/
}
</style>
</head>
<body>
<div class="cell">
<div class="up1">
</div>
<div class="up2">
</div>
<div class="up3">
</div>
<div class="content">
这里放内容
</div>
<div class="down1">
</div>
<div class="down2">
</div>
<div class="down3">
</div>
</div>
</body>
</html>
Web网页上使用VBScript还是JavaScript?
如果你要编写一个Web网页就必须要编写一些脚本。幸运的是,你可以从几种脚本编写语言中选择一个。不幸的是,有这么多种语言可以选择,到底选哪一种呢?你应该怎么做?
或者,如果你获得了一个网页,它的脚本是用一种你不怎么使用的脚本语言编写的,你怎样才能够用这个脚本来增加一些新的功能呢?
在本文中,我将会讨论到这些问题。而首先,我会指导你如何用微软公司所提供的这两种脚本编写语言来进行工作。
Microsoft Visual Basic, Scripting Edition (VBScript).
JScript,它是ECMAScript的Microsoft版本,是一组包括JScript 和JavaScript脚本编写语言的标准定义。
当然,还有其他的脚本编写语言,如Perl 和Rexx等。不过这里我着重介绍两种语言,微软公司在Internet Explorer和Internet Information Server (IIS)中为它们提供了ActiveX Scripting Language(ActiveX脚本编辑语言)引擎。
我还要讨论你何时需要在同一个网页中使用这两种语言(如你所见,这是完全可行的)。为了对你有所帮助,我列出了一系列有关的小问题,这些问题在你工作时必须牢记于心。
为了清楚地论述这个问题,我将从以下几个方面着手:
- VBScript 和JScript之间的区别
- 如何在Visual InterDev中确定脚本语言?
- 在同一个网页中应用两种语言
- 更新脚本编辑语言
- VBScript 和JScript之间的区别
VBScript 和JScript之间最大的区别是它们的结构。VBScript 是Visual Basic的子集,如果你曾经用过Visual Basic或者是Visual Basic for Applications (VBA),你就会觉得非常熟悉。不过它们并不是完全一样的,因为VBScript是特意为在浏览器中进行工作而设计的,它不包括一些在脚本这个范围以外的特性,如文件访问和打印等等。
而另一方面,JScript从一组编程语言如C, C++, 以及Java等之中脱离出来的。如果你以前曾经用过C或者是Java,那么JScript的结构你会觉得非常熟悉。即便你不知道这些语言也没有关系,JScript的结构一点也不难--它像C和Java一样方便而没有它们那么复杂。
注意:不管怎样,JScript和Java是完全不同的两种语言。Java是一种对于网页应用程序和非网页应用程序都可以使用的完全成熟的开发语言。而JScript是一种主要用于脚本编写的脚本语言。
JScript 和VBScript的任务是相同的--都是让你能够编写自己的Web网页。每种语言都支持一些别的语言不支持的特性,不过,这些差异还不足以自动划分两种语言的使用范围。
更有可能的是,你会基于一些其他因素来选择脚本语言,最大的原因也是最实际的原因:你将要使用的平台能够支持你所选择的语言吗?你编写的是客户端还是服务器?如果是服务器,你的用户会使用什么浏览器和服务器软件?
下面的文章中会详细介绍这两种脚本编写语言,并且会就在特殊的环境中选择什么样的脚本语言给出一点指导意见。
什么时候选择VBScript?
VBScript主要是用在微软公司的各种平台上。因此如果你想用VBScript来进行编写,你必须要使用下列几种脚本之一:
服务器脚本。如果你想要用VBScript来编写服务器脚本(如在ASP网页中),这个服务器必须是Microsoft Internet Information Server (IIS)或者是其他的服务器。
客户端脚本。如果你想在浏览器脚本中用到VBScript,这个浏览器必须是Internet Explorer的一个版本。因为其他流行的浏览器可能不支持VBScript。
如果你使用的是Visual InterDev,那么你应该已经在使用IIS了(或是其他相同的服务器),因而用VBScript来编写服务器脚本不是问题。如果你使用的不是IIS,你要搞清楚该服务器是不是能够支持VBScript。
然而,如果你要建立的是一个公共Web站点,你无法控制其他人使用的浏览器,那么Internet Explorer只能用于客户端脚本这个限制就成问题了。不过,如果你是在浏览器已知的情况下用VBScript编写客户端脚本,这还是可行的。
如果你的目标平台能够支持VBScript,考虑一下下列因素再决定是否用VBScript来编写脚本:
错误控制。在VBScript中有On Error Resume Next来对特殊情况给出说明。如果你编写的是服务器脚本,错误控制是非常重要的,因为脚本的运行是无人照顾的。
格式化。VBScript有这样的功能,能够轻易地把数据,数字和货币数据格式化。
在Internet Explorer中事件控制很方便,就像在Visual Basic中一样。在VBScript中也能够建立一个隐含的事件处理程序,这只需要用对象__事件结构形式来定义一项功能就行了,比如说Button1_onclick。不过在Internet Explorer中,JScript没有这项功能(但在其他的JScript主机上支持这项功能)。
什么时候选择JScript?
几乎所有允许编写脚本的浏览器都支持JScript。因此,如果你是为一个公共Web站点编写一个广泛散发的应用程序,用JScript来编写客户端脚本是很自然的选择。你还会发现,因为JScript应用得如此广泛(还有与它类似的JavaScript),是一种标准的脚本语言,你可以在书店里,也可以在网上找到很多有关的资源。
如果你想用JScript来编写服务器脚本,那么你应该检查一下你的服务器是否支持它。微软公司的IIS允许你用JScript来编写ASP网页的脚本,但这并不是所有的服务器都支持的。
影响到你做决定的其他因素还有:
动态执行。JScript一个非常有力的特性是:它允许你在你的脚本内建立和执行脚本或者动态地进行评价。简而言之,在你的脚本中能够编写脚本。当你用DHTML进行工作时,这个特性是非常有用的,因为这样你就能够动态的操作DHTML的文档模型了。
面向对象。JScript使用的是一种基于原型的对象结构,它能够允许你在脚本中定义对象。你能够往对象的原型中加入方法和特性,扩展内置对象和定制对象。
使用JScript时的一个警告:JScript是区分大小写的,如果你仅仅使用过Visual Basic 或VBScript也许对此难以适应。
如果你是初学JScript,你还要知道如何用JScript来建立事件处理程序。在Internet Explorer 中,JScript会要求你链接到一个对象上,而这个对象又是与事件处理程序相连的。通常,只要在鉴别事件并且有处理程序功能的对象的标签栏中指明其属性就能够完成。如下例所示:
在其他的主机上,你可以使用隐含的事件绑定,不过它要求的结构与VBScript中稍稍有所不同。在JScript中约定的隐含处理程序是:
<SCRIPT LANGUAGE="JavaScript">
function btnSave::onclick(){
// script here
}
</SCRIPT>
值得注意的是,在这两个例子中LANGUAGE这项属性是设置为"JavaScript"的。Internet Explorer对于"JScript" 和"JavaScript"这两个名字都认识,而许多其他的浏览器却只认识"JavaScript",不认识"JScript" 。因此,为了保险起见,如果你不能确定该网页是用Internet Explorer来浏览,你最好用"JavaScript"。
要了解更多在JScript中建立事件处理程序的情况,请查看位于MSDN Library Online中的Microsoft Visual InterDev?文档。(要访问MSDN Library Online必须有MSDN Online Membership资格,这一资格是免费的,不过要简单的一次性的注册一下。)
如何在Visual InterDev中明确所用的脚本编写语言?
不管你用什么语言来编写脚本,你必须要明确的指出来,这样主机才知道用什么脚本引擎来处理你的脚本。到底用什么语言来编写,取决于你是用内联服务器脚本来进行工作还是用<SCRIPT>块来工作(不管是客户端脚本还是服务器脚本),同时也取决于你所使用的Visual InterDev的版本。
为内联服务器脚本选择脚本语言
如果你使用的是IIS和ASP网页,你可以编写两类服务器脚本:内联脚本(在<% %>分隔符中的脚本)和在<SCRIPT>单元中的脚本。一般来说,用内联脚本你可以把结果插入到网页中的HTML中。相反,在<SCRIPT>单元中的脚本是用来建立从内联脚本中调用的功能和子程序的。
注意:要建立一个在<SCRIPT>单元中的脚本并让它运行起来像内联脚本也是可能的。也就是说,脚本所陈述的不是一项功能或者某个子程序的一部分。不过我们并不推荐这种做法。要知道更多的细节请看本文后面部分的"服务器脚本执行顺序"。
对于服务器和客户端脚本来说,为<SCRIPT>单元选择语言的方法是一样的。要知道详细情况请见本文后面部分的"为一个 <SCRIPT> 单元设置语言"。
在一个网页中所有的内联脚本要用同一种语言来编写。当你建立了一个新的ASP网页后,网页中会自动包含一个@指示,它指明了内联脚本的脚本语言。@指示可以像这样:
<%@ Language="VBScript" %>
@指示一定是网页中的第一行内联脚本命令。如果没有这个指示,IIS会缺省地指定用VBScript来作为内联脚本语言。
改变网页的内联脚本语言
在Visual InterDev 1.0中,可以对网页进行编辑把指示改变一下,设置一种新的语言,如"JavaScript."等。
在Visual InterDev 6.0中,右键点击网页后就会出现该网页的Properties对话框。然后在Default脚本语言下,选择一种新语言。经过应用之后,编辑器会在@指示中更新为相应的脚本语言。当然,如果你愿意,你也可以自己手动编辑@指示。
你还能够为所有的新ASP网页更换缺省值。这个操作不能够改变现在的网页,不过它对你从现在起建立的所有网页都会有用。
为内联脚本更换缺省语言
在Visual InterDev 1.0中,从工具菜单中选择Options选项,然后再选择HTML一栏。在Active Server Pages的缺省脚本语言处选择一种语言。
在Visual InterDev 6.0中,右键点击Project Explorer中的项目名字,然后选择Properties。选择Editor Defaults一栏,然后在缺省脚本语言处选择一个新的缺省值。
为<SCRIPT>单元设置语言
与内联服务器脚本不一样的是,你在<SCRIPT>单元中所使用的脚本语言在同一个网页中可以有很多种。如果某一块是用VBScript来编写的,那么另一块也可以用JScript。(记住,不是所有的平台都支持VBScript。)
注意:在同一个网页中混合几种语言有很多注意事项,详细内容请见本文后面部分的 "在同一个网页中用几种不同的语言来工作"。
为一个<SCRIPT>单元指定语言
在<SCRIPT>标记中包含了一个LANGUAGE单元,它指明了你所要使用的语言。例如,在下面这个<SCRIPT>标记中就指明了该<SCRIPT>单元中的所有脚本都要用JScript编写:
<SCRIPT LANGUAGE="JavaScript">
function test(){
alert("testing");
}
</SCRIPT>
注意:在IIS的服务器脚本中要求有LANGUAGE属性。而在客户端脚本中它只是一个选项。如果LANGUAGE属性没有了,处理程序会使用缺省的脚本语言。在Internet Explorer的客户端脚本中,缺省值通常是第一个<SCRIPT>单元的脚本语言,或者如果还没有指明任何语言,那就是JScript了。我们建议你最好不要依赖于缺省值,最好是为<SCRIPT>单元明确地设置一种脚本语言。
在一个<SCRIPT>单元中,你不能把VBScript 和JScript混合起来使用。如果你想同时使用它们,在你的网页中你必须至少有两个<SCRIPT>单元。
Visual InterDev 1.0 和Visual InterDev 6.0都提供了能够自动生成脚本的工具。在Visual InterDev 1.0 中有Script Wizard可以帮助你。而在Visual InterDev 6.0中有下列产生脚本的工具:
- Script Block命令。只要你在网页中点击右键,出现的菜单中就会有这个命令。它能够在你点中的那一点插入一个<SCRIPT>单元的框架。
- Script Outline命令。当你双击事件的名字时它就会建立一个事件控制器的框架。在你的设置的基础上,不同的脚本生成工具会决定你所要用的语言。你可以在个别网页中为脚本工具而改变缺省的语言种类。
错误控制。在VBScript中有On Error Resume Next来对特殊情况给出说明。如果你编写的是服务器脚本,错误控制是非常重要的,因为脚本的运行是无人照顾的。
格式化。VBScript有这样的功能,能够轻易地把数据,数字和货币数据格式化。
在Internet Explorer中事件控制很方便,就像在Visual Basic中一样。在VBScript中也能够建立一个隐含的事件处理程序,这只需要用对象__事件结构形式来定义一项功能就行了,比如说Button1_onclick。不过在Internet Explorer中,JScript没有这项功能(但在其他的JScript主机上支持这项功能)。
什么时候选择JScript?
几乎所有允许编写脚本的浏览器都支持JScript。因此,如果你是为一个公共Web站点编写一个广泛散发的应用程序,用JScript来编写客户端脚本是很自然的选择。你还会发现,因为JScript应用得如此广泛(还有与它类似的JavaScript),是一种标准的脚本语言,你可以在书店里,也可以在网上找到很多有关的资源。
如果你想用JScript来编写服务器脚本,那么你应该检查一下你的服务器是否支持它。微软公司的IIS允许你用JScript来编写ASP网页的脚本,但这并不是所有的服务器都支持的。
影响到你做决定的其他因素还有:
动态执行。JScript一个非常有力的特性是:它允许你在你的脚本内建立和执行脚本或者动态地进行评价。简而言之,在你的脚本中能够编写脚本。当你用DHTML进行工作时,这个特性是非常有用的,因为这样你就能够动态的操作DHTML的文档模型了。
面向对象。JScript使用的是一种基于原型的对象结构,它能够允许你在脚本中定义对象。你能够往对象的原型中加入方法和特性,扩展内置对象和定制对象。
使用JScript时的一个警告:JScript是区分大小写的,如果你仅仅使用过Visual Basic 或VBScript也许对此难以适应。
如果你是初学JScript,你还要知道如何用JScript来建立事件处理程序。在Internet Explorer 中,JScript会要求你链接到一个对象上,而这个对象又是与事件处理程序相连的。通常,只要在鉴别事件并且有处理程序功能的对象的标签栏中指明其属性就能够完成。如下例所示:
在其他的主机上,你可以使用隐含的事件绑定,不过它要求的结构与VBScript中稍稍有所不同。在JScript中约定的隐含处理程序是:
<SCRIPT LANGUAGE="JavaScript">
function btnSave::onclick(){
// script here
}
</SCRIPT>
值得注意的是,在这两个例子中LANGUAGE这项属性是设置为"JavaScript"的。Internet Explorer对于"JScript" 和"JavaScript"这两个名字都认识,而许多其他的浏览器却只认识"JavaScript",不认识"JScript" 。因此,为了保险起见,如果你不能确定该网页是用Internet Explorer来浏览,你最好用"JavaScript"。
要了解更多在JScript中建立事件处理程序的情况,请查看位于MSDN Library Online中的Microsoft Visual InterDev?文档。(要访问MSDN Library Online必须有MSDN Online Membership资格,这一资格是免费的,不过要简单的一次性的注册一下。)
如何在Visual InterDev中明确所用的脚本编写语言?
不管你用什么语言来编写脚本,你必须要明确的指出来,这样主机才知道用什么脚本引擎来处理你的脚本。到底用什么语言来编写,取决于你是用内联服务器脚本来进行工作还是用<SCRIPT>块来工作(不管是客户端脚本还是服务器脚本),同时也取决于你所使用的Visual InterDev的版本。
为内联服务器脚本选择脚本语言
如果你使用的是IIS和ASP网页,你可以编写两类服务器脚本:内联脚本(在<% %>分隔符中的脚本)和在<SCRIPT>单元中的脚本。一般来说,用内联脚本你可以把结果插入到网页中的HTML中。相反,在<SCRIPT>单元中的脚本是用来建立从内联脚本中调用的功能和子程序的。
注意:要建立一个在<SCRIPT>单元中的脚本并让它运行起来像内联脚本也是可能的。也就是说,脚本所陈述的不是一项功能或者某个子程序的一部分。不过我们并不推荐这种做法。要知道更多的细节请看本文后面部分的"服务器脚本执行顺序"。
对于服务器和客户端脚本来说,为<SCRIPT>单元选择语言的方法是一样的。要知道详细情况请见本文后面部分的"为一个 <SCRIPT> 单元设置语言"。
在一个网页中所有的内联脚本要用同一种语言来编写。当你建立了一个新的ASP网页后,网页中会自动包含一个@指示,它指明了内联脚本的脚本语言。@指示可以像这样:
<%@ Language="VBScript" %>
@指示一定是网页中的第一行内联脚本命令。如果没有这个指示,IIS会缺省地指定用VBScript来作为内联脚本语言。
改变网页的内联脚本语言
在Visual InterDev 1.0中,可以对网页进行编辑把指示改变一下,设置一种新的语言,如"JavaScript."等。
在Visual InterDev 6.0中,右键点击网页后就会出现该网页的Properties对话框。然后在Default脚本语言下,选择一种新语言。经过应用之后,编辑器会在@指示中更新为相应的脚本语言。当然,如果你愿意,你也可以自己手动编辑@指示。
你还能够为所有的新ASP网页更换缺省值。这个操作不能够改变现在的网页,不过它对你从现在起建立的所有网页都会有用。
为内联脚本更换缺省语言
在Visual InterDev 1.0中,从工具菜单中选择Options选项,然后再选择HTML一栏。在Active Server Pages的缺省脚本语言处选择一种语言。
在Visual InterDev 6.0中,右键点击Project Explorer中的项目名字,然后选择Properties。选择Editor Defaults一栏,然后在缺省脚本语言处选择一个新的缺省值。
为<SCRIPT>单元设置语言
与内联服务器脚本不一样的是,你在<SCRIPT>单元中所使用的脚本语言在同一个网页中可以有很多种。如果某一块是用VBScript来编写的,那么另一块也可以用JScript。(记住,不是所有的平台都支持VBScript。)
注意:在同一个网页中混合几种语言有很多注意事项,详细内容请见本文后面部分的 "在同一个网页中用几种不同的语言来工作"。
为一个<SCRIPT>单元指定语言
在<SCRIPT>标记中包含了一个LANGUAGE单元,它指明了你所要使用的语言。例如,在下面这个<SCRIPT>标记中就指明了该<SCRIPT>单元中的所有脚本都要用JScript编写:
<SCRIPT LANGUAGE="JavaScript">
function test(){
alert("testing");
}
</SCRIPT>
注意:在IIS的服务器脚本中要求有LANGUAGE属性。而在客户端脚本中它只是一个选项。如果LANGUAGE属性没有了,处理程序会使用缺省的脚本语言。在Internet Explorer的客户端脚本中,缺省值通常是第一个<SCRIPT>单元的脚本语言,或者如果还没有指明任何语言,那就是JScript了。我们建议你最好不要依赖于缺省值,最好是为<SCRIPT>单元明确地设置一种脚本语言。
在一个<SCRIPT>单元中,你不能把VBScript 和JScript混合起来使用。如果你想同时使用它们,在你的网页中你必须至少有两个<SCRIPT>单元。
Visual InterDev 1.0 和Visual InterDev 6.0都提供了能够自动生成脚本的工具。在Visual InterDev 1.0 中有Script Wizard可以帮助你。而在Visual InterDev 6.0中有下列产生脚本的工具:
- Script Block命令。只要你在网页中点击右键,出现的菜单中就会有这个命令。它能够在你点中的那一点插入一个<SCRIPT>单元的框架。
- Script Outline命令。当你双击事件的名字时它就会建立一个事件控制器的框架。在你的设置的基础上,不同的脚本生成工具会决定你所要用的语言。你可以在个别网页中为脚本工具而改变缺省的语言种类。
在Visual InterDev 1.0中为Script Wizard设置语言
从Tools菜单中选择Options选项,然后选择HTML栏。在Script Wizard的缺省脚本语言中选择一种语言。
在Visual InterDev 6.0中为脚本生成工具设置一个网页中的语言
首先,右键点击网页,网页的Properties对话框出现。然后在缺省脚本语言下选择一种新的语言。你能够为服务器脚本和客户端脚本设置同一种语言。
注意:为产生服务器脚本块而作出的设置一样可用于为内联脚本设置语言。如果你想在内联脚本中使用一种语言,而在用工具产生的服务器脚本块中使用另外一种语言,你只能手工地进行语言改换。
你还可以改变你的项目的缺省值,这样你建立起来的所有网页都会有与脚本工具一样的缺省语言设置。
在Visual InterDev 6.0项目中改变脚本生成工具的缺省语言设置
在Project Explorer中右键点击项目的名字,然后选择Properties。选择Editor Defaults,在缺省脚本语言处选择一个新的缺省值。
注意:已产生的服务器脚本块语言的设置方法同样可以用于为内联脚本设置语言。如果你想在内联脚本中使用一种语言,而在用工具产生的服务器脚本块中使用另外一种语言,你只能手工地进行语言改换。
想知道Visual InterDev 6.0中脚本生成工具的更多信息,请查看位于MSDN Library Online中的"Choosing a Scripting Language"和Visual InterDev 6.0文档中的 "Handling Events with HTML Elements"。
在同一个网页中同时使用几种语言
我想我已经说得很清楚了,在同一个网页中可以使用不同的脚本编写语言。让再回顾一下:为什么你想这么做?以下是几个原因:
第一个原因是:你只是想在一个程序中利用某种语言的优点,而脚本的其他部分还是用另外一种语言来编写。
第二个原因是:可能你所面对的现有编码是用你不熟悉的语言来编写的。例如,设计时间控制是用JScript编写的,而你熟悉的语言却是VBScript。在大部分情况下,你可以在同一个网页中混合几种脚本语言并且它们相互之间能够配合得很好。用一种语言编写的脚本可以调用用另外一种语言编写的程序并且能够共享全局变量。不过有时候还是会出现一点小问题,现在我将要就此说明一下。
在一个VBScript调用中的括号
当你从VBScript中调用一个JScript函数时,注意在调用过程中要有括号,即使这项函数不要求设置参数也需如此。例如,一个调用应该像这样:
retVal = callJSFunction()
如果你忘记了加括号,那么这个函数所返回的值就不是你所希望的值,而是一个包含了函数本身的目标。
服务器脚本的执行顺序
内联服务器脚本按顺序运行,从头到尾。你可以在一个服务器脚本中定义一个可调用的程序(函数或者是子程序),这样的话,如果需要就可以随时调用它们。
所有的内联脚本必须用同一种语言来编写,也就是在网页前面的@指示中所指明的脚本语言。因此,在一个内联脚本中你不能把几种脚本语言混合起来。
你也许会说"等一等"。在理论上,把内联脚本放到<SCRIPT>单元中是绝对可能的--也就是说只要在单元中的脚本不是一个函数或者一个子程序就可以了。就像下例一样:
<% Response.Write("Some inline script<BR>")%>
<SCRIPT LANGUAGE="VBScript" RUNAT="Server">
Response.Write("Script in a SCRIPT element<BR>")
</SCRIPT>
是的,你可以这么做。但是,这样你就会被IIS ASP处理程序的执行顺序控制。例如,如果你建立了服务器脚本并且在IIS 4.0中运行它,你会发现执行顺序是这样的:
- 采用非缺省语言的<SCRIPT>单元脚本
- 内联脚本
- 采用缺省语言的<SCRIPT>单元脚本
以上的顺序在很大程度上依赖于ActiveX语言引擎的载入顺序,同时IIS 中的ASP处理程序可能在将来会有所改变,因此,我们很不希望你按照这个顺序进行工作,不管你是只把<SCRIPT>单元用于函数或者子程序,还是把它仅仅用于执行顺序无关紧要的编码。
脚本块的顺序
当你把几种语言混合使用时,<SCRIPT>块在网页中出现的顺序非常重要,有时候会影响到它们是否能正常工作。看看下面这个简单的例子,它是在一个内联的VBScript脚本中调用一个用JScript编写的函数:
<SCRIPT LANGUAGE="VBScript">
¹ Calls a JScript function
aNumber = 2
doubledNumber = doubleMe(aNumber)
document.write("The answer is " & doubledNumber)
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function doubleMe(aNumber){
return aNumber * 2;
}
</SCRIPT>
它不会起任何作用。说得更明白一点就是,文档写入说明会往网页中写入一个空的字符串。为什么?很简单,在处理VBScript块时,下面的JScript <SCRIPT>块没有被读出来,没有进行语法分析,因此网页不能使用它。而当浏览器处理网页中的脚本块时,它是从上往下进行的。
在这个例子中,只需要调换一下脚本块的顺序就能够解决这个问题了。事实上,这类问题并不那么常见,在大多数情况下,<SCRIPT>中包含的函数和子程序只有当整个网页被全部下载下来并且所有的单元都可以使用之后才能够被调用。不过,你还是要记住,网页是按照一定的顺序来处理的,不同语言的<SCRIPT>块是分别处理的。
区分大小写以及命名习惯
JScript能够区别大写和小写:在每个JScript的关键字,还有JScript姓名空间的所有部分中,你可以把大写和小写字母恰当的结合起来使用。这其中包括了你使用的对象模型中所有的关键字。例如,当你使用ASP Response对象时,必须正确地使用大写或小写字母(如Response.Write),否则JScript 会坚决不予承认。同样的,如果你为DHTML onclick事件编写一个处理程序时,如果用在Visual Basic中经常使用的形式JScript可能就不会承认。
VBScript当然是不区分大写和小写字母的。在某种程度上,这种不计较大小写的忽视甚至在你用VBScript对JScript编写的单元进行访问时都适用。下面几个小例子中给出了两个脚本。第一个是用JScript编写的,其中还包括了一个全局变量(ctr)和一个小小的函数(doubleMe)。第二个脚本是用VBScript编写的,它是一个按钮处理程序,它能够调用JScript函数,并且报告全局变量的值。
<SCRIPT LANGUAGE=javascript>var ctr;function doubleMe(aNumber){ // Initialize value of global counter if(parseInt(ctr)){
ctr = ctr + 1;}
else{
ctr = 1;
}
return aNumber * 2;
}
</SCRIPT>
<SCRIPT LANGUAGE="vbscript">
Function btn1_onclick()
numberToDouble = 12
alert("The doubled number = " & DoubleMe(numberToDouble))
alert("You have doubled the number " & Ctr & " times.")
End function
</SCRIPT>
在VBScript脚本中,很明显,我在提到doubleMe 函数和ctr变量时,没有正确使用字母的大小写,但是程序依然运行良好。
这是一个好消息。而坏消息就是,在下面这些情况下你一定要注意字母的大小写:
如果网页中的JScript脚本所包含的单元只能够通过字母的大写和小写来区分,例如,一个叫做Timer()的函数和一个叫做timer的全局变量等等。记住,尽管这种编码方式不怎么好,但是有时候在你的网页中还是可能会遇到原来就存在的编码。
如果你在一个函数调用中把JScript单元的名字作为一个字符串参数来使用
如果JScript包括的单元仅仅能够用字母的大小写来区分,那么VBScript就会让你把它们看成一样的(也就是说,不区分大写和小写)。VBScript只能看看不管大小写的区别,它们是不是一样,因此它识别出的只有一个JScript单元。换一句话说,如果VBScript首先找到的是叫做Timer()的函数,那么它就无法找到叫做timer的全局变量了,反之也是一样。即便你在VBScript编码中十分注意的把它们做了区别结果也是一样。因为VBScript在处理这些名字的时候认为它们只有一种写法。不幸的是,这里没有其它的解决方法,除非在JScript的代码中不利用这些大小写之间的微小差别来区分不同的函数名称。
除了在某些特殊的情况下,把单元名作为参数使用这种问题并不常见。特殊情况之一是在Visual InterDev 6.0中的脚本对象模型中。下面我会把它作为一个例子来使用,你可以把它看作是相同情况下的处理准则。
Visual InterDev 6.0的脚本对象模型都是用JScript来编写的。你也可以用VBScript来编写自己的编码,它能够与用VBScript区分大小写方式编写的脚本对象模型一起使用。有时候,你不能够直接调用某一方法,除非你把这个方法的名称传递到一个JScript函数中,而由函数来为你调用这个方法。
一个典型的例子就是警告方法,你可以用它把一个方法绑定到一个特殊的事件上。在下面这个例子中,一个按钮的onmouseover事件被绑定到changecaption()事件处理程序上。
<SCRIPT LANGUAGE="VBScript">Function setAdviseMethods()
Btn1.advise("onmouseover", "changecaption()")
End Function
</SCRIPT>
因为你把这些名字作为字符串传送到一个JScript函数中,所以你能够得到正确的大小写表示。稍后,JScript会自动用它的区分大小写的规则来重新评估这些名字,如果大小写不正确,它会找不到它们。
从VBScript 往JScript中传送数组
有时候一个VBScript程序会传送一个数组作为它的一个参数,或者作为它的返回值。你可以从JScript中调用这个程序,不过必须把VBScript 数组转换成为一个可用的JScript 数组。你只要在JScript 函数中建立一个VBArray 对象并且用toArray把它转换成为一个JScript数组就可以了。
注意:JScript不支持多维数组,如果原来的VBScript数组是多维的,经过toArray的转换后它会成为一个一维的JScript数组。
在下面的例子中有一个VBScript 脚本,它建立了一个数组,还有一个JScript脚本,它将说明如何才能获得并使用这个数组:
<SCRIPT LANGUAGE="VBSCRIPT">
Function makeArrayVB()
¹ Creates a VBScript array
dim anArray(1,1)
anArray(0,0) = "0,0"
anArray(0,1) = "0,1"
anArray(1,0) = "1,0"
anArray(1,1) = "1,1"
makeArrayVB = anArray
End Function
<SCRIPT LANGUAGE="JavaScript">
// Accesses a VBScript array within a JScript script
function getVBArray(){
var arrayObj;
var jsArray;
arrayObj = makeArrayVB();
jsArray = VBArray(arrayObj).toArray();
alert("VBScript array length = " + jsArray.length);
// Displays the contents of the array
for(i=1;i<=jsArray.length;i++){
alert(jsArray[i-1]);
}
}
</SCRIPT>
不过,在目前的VBScript(4.0)中,反过来是无法做到的。也就是说你不能把一个JScript 数组转换成为VBScript数组。如果你遇到的是一个JScript程序,要转换数组,你可以选择一下几种做法:
- 用JScript编写调用程序
- 用VBScript 重新编写JScript程序
- 如果可能,把JScript 数组转换成一种不同的结构,如转换成一个限制的字符串等,这样VBScript 就能够使用了。例如,你可以用toString 函数把一个数组转换成一个用逗号分隔的,无限制的字符串。这样,在VBScript中你就能够用Split函数把它分成不同的单元。很明显这种方法在很多时候并不管用,不过有时又的确有效。
更新脚本语言
VBScript和 JScript都不是一成不变的语言。两种语言的引擎都定时进行更新,增加一些新的特性,解决已经发现的问题。因为两种语言实际上都是作为ActiveX组件来应用的,所以每当你更新任何控制器时,你就可以同时更新它们。当你安装了新的语言引擎之后,任何需要调用引擎的应用程序会在它们运行某些脚本时调用这个新引擎--这些引擎包括Internet Explorer 或Visual InterDev等。
如果要了解语言引擎的情况以及如何更新的方法,还有脚本的一般知识,请访问Microsoft Scripting Web站点,网址是:http://msdn.microsoft.com/scripting/。同时,祝你编写脚本时一切顺利!
div+css 布局最精简代码建议
如何使网站速度快,需要精简代码,那么如何精简代码呢?div+CSS 布局最精简代码建议,使用div+css布局做到最精简的代码,以达升网站速度的目的。
1、css样式尽量合并成一个外部文件,采用link方式导入到网页中来,可以减少不少内嵌在网页中的css代码。
2、多用全局样式,比如网页中只有一个h1标签,那么直接在css文件中定义h1的样式,如h1{......},而不要给h1标签加class或者id来定义样式,这样一来就可以省略class=""或id="",整个网页精简下来就可以简洁不少代码。
3、多采用父级继承样式控制,在div中尽量使用不同标签来控制网页表现形式,比如一个div中需要有3个不同颜色的文字,这样做同样可以减少不少的class和id。
<div>
第一种文字
<span>第二种文字</span>
<font>第三种文字</font>
</div>
css样式可以这样写:
div { color: #000}
div span { color: #f00}
div font { color: #0f0}
英文字母换行问题
网页制作的过程中,特别是DIV+CSS架构的时候,要注意英文字母的换行问题。
因为我们会发现,如果直接用表格写一行字体的话,到了头会自动换行的,但是如果是英文,也在一个表格或是一个DIV固定的宽度里面,写一行英文字体,这个字体是不会自动换行的。它会把表格撑开,一直到最后结束或是到你按了BR换行为止。
这是为什么呢?
原因似乎很难讲得出来,下面我们来看一下出现这种情况的解决方法吧。
就是 word-break,当把这项设为break-all时大家就可以看到效果了.
<table width="100%" style="word-break:break-all">
<td width="20%">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td><td width="80%"></td></table>
DIV+CSS背景图片在FF中消失,FF中不显示背景图片的解决方法
当你设置了背景图片的时候,ie显示正常,但是火狐却没有显示,如果网友很大,看到的效果是:背景图片在火狐中一闪而过,而不是没有显示。
你可以尝试如下方法:
1、把css中背景图片的地址改为完整网址,如12.jpg,改为网址+12.jpg就可以了。因为在火狐中是一闪而过,而使用完整网址的话,浏览器就会去重新解析,下载图片,这样产生了一定的延时,一闪而过的图片得以显示。
2、看看图片路径是不是有中文名称,有些浏览器不能兼容中文路径,把路径改成英文的试试。
3、当有float样式时要注意在内部每个div后加一个清除浮动,这样firefox和opera就把里面不当成浮动(ie会自动清除),会自动计算内部div高度
.inner1{
float:left;
}
.inner2{
float:right;
}
<div class="outer">
</div>
JS实时走动的时钟代码
JS实时走动的时钟代码,实时刷新当前时间,犹如真实的手表一样,欢迎阅读下文,附详细代码。
以下是引用片段:
<script>
function tick() {
var hours, minutes, seconds, xfile;
var intHours, intMinutes, intSeconds;
var today;
today = new Date();
intHours = today.getHours();
intMinutes = today.getMinutes();
intSeconds = today.getSeconds();
if (intHours == 0) {
hours = "12:";
xfile = "午夜";
} else if (intHours < 12) {
hours = intHours+":";
xfile = "上午";
} else if (intHours == 12) {
hours = "12:";
xfile = "正午";
} else {
intHours = intHours - 12
hours = intHours + ":";
xfile = "下午";
}
if (intMinutes < 10) {
minutes = "0"+intMinutes+":";
} else {
minutes = intMinutes+":";
}
if (intSeconds < 10) {
seconds = "0"+intSeconds+" ";
} else {
seconds = intSeconds+" ";
}
timeString = xfile+hours+minutes+seconds;
Clock.innerHTML = timeString;
window.setTimeout("tick();", 100);
}
window.onload = tick;
</script>
select的样式在IE和FF下不一致怎么办?
做过网站建设程序的都知道,在做SELECT的时候,会发现select的样式在IE和FF下不是一致,如何设置是一致的呢?
SELECT 的高度没有其他的特别设置在IE下是固定的!所以的外面加个小小的限制它才行!看以下的代码:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.easysous.com</title>
<style type="text/css">
<!--
div {
border:1px solid #c00;
width:123px;
height:18px;
clip:rect(0px,18px,22px,0px);
overflow:hidden;
}
select {
position:relative;
left:-2px;
top:-2px;
font-size:12px;
width:125px;
line-height:18px;border:0px;
color:#909993;
}
-->
</style>
</head>
<body>
<div>
<select>
<option>新易搜</option>
<option>北京网站建设</option>
<option>北京网站制作</option>
<option>网站建设</option>
<option>北京网站优化</option>
<option>搜索引擎优化</option>
</select>
</div>
</body>
</html>
网站建设三剑客
1、什么是Dreamweaver?
工欲善其事,必先利其器。Dreamweaver在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具,它与Flash、Fireworks合在一起被称为网页制作三剑客,这三个软件相辅相承,是制作网页的最佳选择。其中,Dreamweaver主要用来制作网页文件,制作出来的网页兼容性比较好,制作效率也很高,Flash用来制作精美的网页动画,而Fireworks用来处理网页中的图形。
2、什么是Fireworks?
Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件,它大大简化了网络图形设计的工作难度,无论是专业设计家还是业余爱好者,使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画,还可以轻易地完成大图切割、动态按钮、动态翻转图等,因此,对于辅助网页编辑来说,Fireworks将是最大的功臣。
3、什么是flash?
flash是Macromedia公司推出辅助网页的动画制做工具。
虽然上面是常用的三剑客,但是我们现在用来作图像处理的工具用得比较多的还是PHOTOSHOP,因为这个ADOBE的主打产品,而且也是一流的图形处理工具。所以我们会用得比较多。
- 默认分类(20)
- J2EE(25)
- Java(56)
- PHP(55)
- SEO(10)
- 网页设计(20)
- 网站建设(37)
- 数据库(7)
- JavaScript(17)
- JQuery(6)
- MySQL(20)
- SQL Server(6)
- Access(1)
- Oracle(6)
- office(6)
- Dreamweaver(4)
- Photoshop(12)
- Flash(9)
- Fireworks(13)
- CSS(14)
- HTML(4)
- .NET(7)
- ASP(2)
- DB2(1)
- Ajax(2)
- Linux(12)
- Struts(7)
- Hibernate(8)
- Spring(2)
- Jsp(22)
- Asp(8)
- C#(3)
- C++(1)
- 网络安全(5)
- 软件工程(7)
- XML(1)
- English(2)
- 计算机等级考试(2)
- 计算机病毒(4)
- 个人日志(76)
- 互联网(15)
- ActionScript(10)
- Android(3)
- 数据结构与算法(1)
- 游戏策略(3)
- 美文翻译(2)
- 编程开发(19)
- 计算机应用(4)
- 计算机(10)
- Unity3d(6)
- 其他(1)
- egret(1)