动态HTML技术教学内容_第1页
动态HTML技术教学内容_第2页
动态HTML技术教学内容_第3页
动态HTML技术教学内容_第4页
动态HTML技术教学内容_第5页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

精品文档第五章 动态网页的制作5.1动态HTML【学科】信息技术 【授课教师】 【年级】 【班级】【课时】 【备课时间】 【教研组长签字】学习目标：1、了解什么是动态 HTML、学会使用动态HTML技术和脚本技术制作简单的动态网页学习重难点：1、理解动态HTML、脚本、事件等概念、掌握简单的脚本语言及其在实例中的运用、掌握样式表定位技术及其简单运用、掌握DOM及其简单运用学习方法：任务驱动法教学过程：一、导入新课我们在上网冲浪时经常会看到各网站上让人眼花缭乱的各种动画效果，同时我们也会惊叹一些网站的更新速度之快，这些让人惊叹的效果都可以通过动态HTML技术来实现。那么什么是动态 HTML：在了解动态HTML之前我们先来了解一下什么是HTML。HTML是一种“静态”的网页设计语言，主要提供文本和图形的显示，难以实现页面元素运动和对文字图像等进行精确定位的功能。动态HTML即Dynamic HTML，简称DHTML，它作为浏览器的一个扩展功能，是几种技术的结合——客户端脚本、样式表定位和文档对象模型（DocumentObjectModules，简称DOM）。上述三种技术的结合产生了网页的动态效果，如第四章中网页动态特效的网页过渡效果制作就是一个很好的实例。二、讲授新课（一）网页脚本观摩：P1411、脚本（Script）脚本是脚本script是使用一种特定的描述性语言，依据一定的格式编写的可执行文件，又称作宏或批处理文件。脚本通常可以由应用程序临时调用并执行。各类脚本目前被广泛地应用于网页设计中，因为脚本不仅可以减小网页的规模和提高网页浏览速度，而且可以丰富网页的表现，如动画、声音等。举个最常见的例子，当我们点击网页上的 E－mail 地址时能自动调用 OutlookExpress 或Foxmail这类邮件软件，就是通过脚本功能来实现的。在万维网上，人们常用脚本语言（javascript 和vbscript ）来编写是HTML产生动态效果或制作更强的交互功能，例如，近年出现的 AJAX技术。常见的脚本语言：Scala、JavaScript，VBScript，ActionScript ，MAXScript，ASP，JSP，PHP，SQL，Perl，Shell，python，Ruby，JavaFX，Lua，AutoIt 等。下面所介绍的脚本以 JavaScript 为例。例如：<script language =”JavaScript 1.2” >表示脚本采用JavaScript1.2 版本程序语言。<scriptlanguage= ”JavaScript1.2 ”src=”../animate.js ”>表示脚精品文档精品文档本需要嵌入外部脚本程序，程序名为animate.js。这个外部脚本程序是一个文本文件，里面编写了实现动画效果的JavaScript代码段。JavaScript脚本程序可在任何客户机或服务器上运行。JavaScript是一种面向对象语言，它构建在WEB浏览器中，不能单独运行。它是一个向浏览器提供指令的语句集合。JavaScript的代码对大小写敏感。用户必须严格遵守程序书写格式。由于JavaScript是按行逐一解释执行的，如果中间出现错误，脚本程序将停止执行后面的语句操作。VBScript（visualbasicscriptingedition ）是Microsoft 公司开发的一种解释执行的基于对象的脚本语言，并不是所有的浏览器都支持这种脚本。2、事件（Event）事件是浏览器响应用户操作的机制，JavaScript的事件处理功能可改变浏览器响应这些操作的方式，从而开发具有交互性的网页。事件是说明用户与网页交互时产生的操作，例如，当用户单击超链接或网页中的按钮时都会产生一个事件（鼠标单击事件），从而完成进入网页或离开网页的操作，浏览器等待事件发生并在事件发生时进行相应的处理。几种常见事件事件 表示何时处理onClick 单击链接、按钮等onLoad 浏览器显示图形、文档时onUnload 用户退出文档时onMouseOver 当鼠标经过连接时onMouseOut 当鼠标移到连接时任务运用JavaScript 脚本技术实现网页加载时弹出欢迎词。操作如下：尝试改变进入网页时的效果。我们通过一个小 JavaScript 脚本程序，体验脚本程序的编写过程。（1）打开“虎门销烟启思录”网站首页，切换到 HTML视图。（2）在HTML代码的<head>he</head>标记之间加入一段 JavaScript 脚本代码，注意字符大小写。<scriptlanguage= ”JavaScript1.2 ”>FunctionSayHello(){alert( “Hello, 欢迎访问虎门销烟启思录网站” )；}</script>（3）修改<body>标记中的 onload事件，改写为：<bodybackground=“../images/marble.gif ”onload=”SayHello() ”精品文档精品文档language=”JavaScript ”>4）保存网页，预览效果（二）样式表定位在第四章中，我们曾运用样式表对网页上显示的样式进行控制，例如：字体的颜色、文档的背景、图片的边距等。样式表定位是样式表的延伸，它为屏幕上所有元素赋予了精确到像素的定位。样式表定位技术最主要、最基础的内容是：使用<DIV></DIV>标记来放置页面元素。在主题网站的设计中，导航栏的设计是很关键的。导航栏要清晰反映网站的结构不容易，因为一个网站的栏目往往是很多的，这时可以采用下拉菜单来节省屏幕空间，需要时菜显示相关内容。任务结合脚本技术与<DIV></DIV>标记，制作一个简单的下拉菜单。操作如下：1）新建一个网页文件，切换到HTML视图编辑。2）制作思路：编写菜单的代码，首先你必须描述它的外观。在菜单条上加入一定的颜色以及描述各项功能的名称，例如file、edit、view等等。当点击该文字时，就会显示该菜单项下的子菜单。在子菜单框中点击相应的菜单项目就可触发某个程序。制作过程：①生成一个顶部的菜单条： <DIVid=”menuBar></DIV>。②现在将该菜单条样式放在页面顶部，加上特定的颜色：<styletype=”text/css”>#menuBar｛position:absolute;left:0;top:0;width:100%;height:22px;border: 1pxsolid#99ffff;background-color:#99ffff;layer-background-color:#99ffff;｝</style>①下面依照第②步的设置样式表的做法逐一完成菜单目录。②最后给菜单条加入脚本使其能响应鼠标的动作，并执行相应的功能。（三）文档对象模型文档对象模型是动态HTML的核心内容。DOM体现的是网页各元素之间的关系，包括浏览器自身属性（如浏览器的版本号），窗口自身的属性（如网页的URL），各HTML元素，甚至还包括一些背景信息（如当前日期、时间等）。通过利用脚本语言编程控制DOM，可使更多的网页元素产生变化（如自动显示最新刷新时间等）。任务：结合运用脚本技术与文档对象模型，制作浏览器状态栏“走马灯”文字提示，操作如下：<script><!—BeginningofJavaScriptApplet---->精品文档精品文档Functionscrollit_r21(seed){varm1=“状态栏文字运动”；varm2=“”;varmsg=m1+m2;varout=“”;varc=1;varspeed=0if(seed>100){seed-=2;varcmd=scrollit”_r21(“+seed+”)”;timerTwo=window,setTimeout(cmd,speed);}elseif(seed<=100&&seed>0){for(c=0;c<seed;c++){out+=””;}out+=msg;seed-=2;varcmd=”scrollit_r21(“+seed+”)”;window.status=out;timerTwo=window.setTimeout(cmd,speed);}elseif(seed<=0){if(-seed<msg.length){out+=msg.substring(-seed,msg.length);seed-=2;varcmd=”scrollit_r21(“+seed+”)”;window.status=out;timerTwo=window.setTimeout(cmd,speed);}else{window.status=””;timerTwo=window.setTimeout(“scrollit_21(100)”,speed);}}}scrollit_21(100);//--EndofJavaScript

人人文库> 全部分类> 办公材料 > 办公文档

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论