怎么整理网站,电商网站建设网,wordpress页面属性模板怎么添加,营销型网站建设成为企业发展新趋势(注:原作者未知 来源:动态WEB脚本技术论坛) 如果您是HTML的初学者#xff0c;请您先自学HTML。因为DHTML是现有的HTML技术的一个综合#xff0c;所以HTML语言对学习动态HTML是非常重要的。 自从HTML 4.0出现以后#xff0c;引入了“层叠样式表”(CSS),于是网页制作者能够随心…(注:原作者未知 来源:动态WEB脚本技术论坛) 如果您是HTML的初学者请您先自学HTML。因为DHTML是现有的HTML技术的一个综合所以HTML语言对学习动态HTML是非常重要的。 自从HTML 4.0出现以后引入了“层叠样式表”(CSS),于是网页制作者能够随心所欲地对自己的网页进行外观和动态的设计并且使网页具有交互性。其实动态HtmlDHtml并不是一种专门的技术而是Html技术的一个综合说白了就是一种技巧但往往是这样或那样的小技巧使我们的网页变得更加好看、实用。好了废话少说下面开始以实例来说明动态HTML在网页设计中的应用。 例1 使用style和/style标志对修饰文本 html head titleDHtml举例1/title style h2 {font-family:宋体;color:blue;font-size:12pt;text-align:center} /style /head body h2被修饰文本/h2 /body /html 本例中我们使用了style和/style标志对来修饰文本请留意蓝色字style和/style标志对是加在head和/head标志对之间的而加上!--和-- 是为了让不支持style和/style标志对的浏览器跳过样式表否则可能会出错。本例先对 h2 /h2标志对中的文本样式在 style和 /style标志对中进行定义于是在后边h2/h2中就依样式表定义的内容对文本进行修饰。font-family定义字体font-size定义字体大小text-align定义文本对齐方式color定义前景颜色。 除此之外我们还可以采用另一种方法来实现。请看下边的例子。 例2 直接用style属性修饰文本 html head titleDHtml举例2/title /head body h2 stylefont-family:宋体;color:blue;font-size:12pt;text-align:center被修饰文本/h2 /body /html 请务必注意font-family后是用单引号来定义字体的font-family:宋体。好了现在您已经初步掌握了样式单的用法了明天我们开始让您的主页动起来。 Dhtml实例教程二 例3 使用鼠标触发事件和动态样式表改变文本 html head titleDHtml举例3/title /head body h2 οnmοuseοverthis.style.textDecorationunderline οnmοuseοutthis.style.textDecorationunderline stylefont-size:12;text-align:center请将鼠标移到上面/h3 br h3 aligncenter οnmοuseοverthis.style.colorred οnmοuseοutthis.style.colorgreen我是变色龙/h3 /body /html 在这个例子中,当您把光标放在文字上时,onmouseover事件将被触发于是执行其后的style定义此时文字下加了一条直线this.style.textDecorationunderline的作用this用来指代当前的对象即 标志对。当您把光标移开文字时onmouseout事件被触发此时文字下的直线消失了this.style.textDecorationunderline的作用这样网页就有了动态的效果。同理我们可以通过触发鼠标事件来改变文本的颜色如上例中的第二行黑体字所示。 再次提醒读者在使用样式单的时候一定要注意格式。比如在 style /style标志对中进行样式单定义时应使用text-decoration:underline而不是用textDecorationunderline来修饰文本后者是用于事件触发中的如onmouseover或onmouseout事件。许多CSS属性的名字中都有连字符(像text-decoration)但是连字符在许多脚本语言如JavaScript中是不合法的标识符因此在HTML或样式表中指明CSS属性的时候用连字符命名方式但在作为一个脚本属性时就必须去掉连字符并将它后面的第一个字母大写。例如 text-decoration变为textDecoration、background-color变成backgroundColor、margin-top变成marginTop。 您可能想用鼠标点击文本来改变其的颜色要做到这一点很简单只要在onclick事件中定义样式即可onclick的用法与onmouseover、onmouseout相似。 Dhtml实例教程三 例4 使用onclick动态改变字体的颜色 html head titleDHtml举例4/title /head body h3 aligncenter οnmοuseοverthis.style.colorred οnmοuseοutthis.style.colorgreen οnclickthis.style.colorblue我是变色龙/h3 /body /html 在这一例子中当您把鼠标移动到文字上时文字颜色变为红色当鼠标离开文字时文字颜色变为绿色当在文字上单击鼠标时文字颜色变成了蓝色。 下面是我用样式单制作的一个自认为比较漂亮的Html文件。 例5 “轻松自学动态HTML”的图形标志 html head meta http-equivContent-Type contenttext/html; charsetgb2312 titleDHtml举例5 style !-- body {font-family:宋体;font-size:9pt;color:#00aaff} h2.top {font-family:serif;font-size:9pt;color:yellow;text-align:right;background-color:rgb(174,0,0)} h2.bottom {font-family:serif;font-size:12pt;margin-left:-2pt;margin-top:-50pt} -- /style /head body bgcolor#000000 br table aligncenter border0 width27% bgcolor#000000 cellpadding12 tr td width168h2 classtop轻 松 自 学 动 态 HTML/h2 h2 classbottomspan stylefont-size:50pt;color:limeit/i/span each youself DHtml/h2 /td /tr /table /body /html 请注意例子中的蓝色部分class属性是用来定义标志对使用的样式类如h2 classtop……/h2指定了 h2/h2标志对中使用样式类“top”而“top”则是在style style标志对中定义的。 OK您会了吗样式单就这么简单。 Dhtml实例教程四 现在我们开始使用JavaScript来编写动态HtmlJavaScript是一种脚本语言使用起来就象是在编写程序一样。 实际上我们只要在Html文件中加入script languageJavaScript/script标志对便可以在标志对中进行编写了。现在我们将教程二中的例3做一下变换也能得到同样的效果。请看下边的例子。 例6 使用鼠标触发事件和动态样式表改变文本 html head titleDHtml举例6/title script languageJavaScript function change_text(){ if(document.all.Dragon.style.colorRed){ document.all.Dragon.style.colorGreen; } else { document.all.Dragon.style.colorRed; } } /script /head body br h3 idDragon aligncenter οnmοuseοverchange_text() οnmοuseοutchange_text()我是变色龙/h3 /body /html 例6中在script languageJavaScript/script标志对中定义了函数change_text()当此函数被调用时它将对对象Dragon的style属性中的color属性进行判断若其颜色值等于“Red”则将其color值变为“Green”document.all.Dragon.style.colorGreen的作用否则将其color值变为“Red”document.all.Dragon.style.colorRed的作用。而对change_text()函数的调用是在h3/h3标志对中进行的idDragon定义了h3/h3标志对的对象名为Dragononmouseover和onmouseout都调用了change_text()函数因此只要onmouseover或onmouseout事件触发都会执行change_text()函数于是便改变了Dragon的属性即当鼠标移动到或离开文本“我是变色龙”时此文本的颜色将在红色Red和绿色Green之间变换。Document指代的是例6自身这个Html文档all指代的是此Html文档的全部对象。 现在看起来要使网页动起来已经变得简单多了。细心的读者会发现例6的局限性因为change_text()函数只能对Dragon对象进行颜色变换若您想对一系列对象的文本如列表中的每一行文本进行颜色变换将会使代码增加。不用担心我们马上解决。为了让change_text()函数更具有通用性我把CSS样式单与JavaScript相结合这将更加简单而且方便 Dhtml实例教程五 例7 CSS样式单与JavaScript相结合改变文本 html head titleDHtml举例7/title style!-- .red {color:red} .blue {color:blue} -- /style script languageJavaScript function change_text(){ if(window.event.srcElement.classNamered { window.event.srcElement.classNameblue; } else { window.event.srcElement.classNamered; } } /script /head body br h3 classred aligncenter οnmοuseοverchange_text() οnmοuseοutchange_text()我是变色龙/h3 h3 classblue aligncenter οnmοuseοverchange_text() οnmοuseοutchange_text()我是变色鸟/h3 h3 classred aligncenter οnmοuseοverchange_text() οnmοuseοutchange_text()我是变色兔/h3 /body /html 从例7中可以看到我在CSS样式单中定义了red和blue两个样式类然后在change_text()函数中对调用该函数的对象进行样式类的改变从而达到颜色的变换关键语句在于window.event.srcElement.className样式类名此语句能使当前调用函数的对象的className属性改变若classred当调用change_text()函数时其classNameblue它的样式类也就变成了“blue”。 也许您会因为要对每一行文本增加onmouseover和onmouseout事件而觉得麻烦不要紧我马上来搞定这个麻烦问题。 Dhtml实例教程六 例8 对列表进行动态变换 html head titleDHtml举例8/title style body {font-family:宋体;font-size:9pt} .first {color:gray;text-decoration:none} .later {cursor:hand;color:blue;text-decoration:underline} /style script languageJavaScript function change_text(){ if(window.event.srcElement.classNamefirst { window.event.srcElement.classNamelater; } else { window.event.srcElement.classNamefirst; } } document.οnmοuseοverchange_text; document.οnmοuseοutchange_text; /script /head body br ul li classfirst 动态Html(DHtml) li classfirst JavaScript li classfirst VBScript li classfirst 动态服务器页面(ASP) li classfirst FrontPage98 li classfirst InternetExplorer li classfirst SQL Server /ul /body /html 本例中的特别之处在于蓝色字部分。CSS样式单首先定义了body/body标志对的样式body {font-family:宋体;font-size:9pt}然后定义了另外两个样式类“first”和“later”first类中的文本修饰是none既没有修饰而later的文本修饰是underline及下加一条直线并且later类中还出现了cursor属性其值为hand即是网页中鼠标移到超级链结是出现的小手。除了小手外cursor还可以取其它的值default、hand、move、crosshair、text、wait、help、nw-resize、n-resize、se-resize、sw-resize、s-resize、w-resize、e-resize和ne-resize等。 注意到语句 document.οnmοuseοverchange_text;和document.οnmοuseοutchange_text;只就是我们解决上边提到的问题的关键语句它们代替了Html文档中所有的onmouseover和onmouseout事件。 您大可以自己设计出更好看、更动感的DHtml来不怕做不到就怕想不到。 Dhtml实例教程七相信您已经对JavaScript有所掌握现在我们用一些小技巧把文本给隐藏起来或将隐藏的文本给显示出来您一定会喜欢这些小技巧的。这次我们用一个新的style属性--display它的值可以是或null和none。请看例9。 例9 隐藏和显示文本 html head titleDHtml举例9/title style!-- body {font-family:宋体;font-size:9pt} .gray {color:gray} .blue {color:blue} -- /style script languageJavaScript function change() { if(Ques.style.display none { Answ.style.display none; Ques.style.display ; } else { Answ.style.display ; Ques.style.display none; } } document.οnclickchange; /script body ul li idQues classgray styledisplay:请您点击OK? li idAnsw classblue styledisplay:none哈哈我变了请您再点击。 /ul /body /html 此例中文本将在您点击以后改变颜色和内容奇妙吧。display或null是显示文本而displaynone时是显示文本上边的代码对您来说应该多能读懂我就不多作解释了。今后的教程中我可能会讲解得比较少或者讲解得不太详细大部分是用例子种的注释语句来说明在此请读者多多谅解。明天的例子能产生闪烁滚动和颜色变换效果。 转载于:https://www.cnblogs.com/mbchn/archive/2005/07/13/192283.html
