ASP动态网页设计(电子教案).doc

第一讲 ASP的系统运行环境教学重点：1、ASP动态网页的工作基本原理；2、Windows 2000 Server /XP IIS的安装与配置；教学要求：1、熟知有关ASP的基本概念和工作原理，如ASP、HTML、静态网页、动态网页、HTTP、PWS、IIS、IP地址等；了解静态网页和动态网页的区别。2、熟练掌握ASP Web服务器的安装与运行环境的配置，特别是在Windows 2000 Server/XP系统中IIS的安装与配置；熟知WEB服务器根目录的设置和主页文件的命名。3、熟悉ASP文件的基本格式；熟练运用Dreamweaver编辑ASP动态网页原代码；熟练掌握使用本机IE浏览器调试ASP程序的方法。教学内容1、关于网站的有关术语与知识Web服务器：存储和管理供给全球各地用户浏览网页的服务器，软件支持如：运行在windows 2000 sever系统上的IIS，运行在unix系统上的apache等 ；客户端浏览器：通过在地址栏中输入Web服务器地址从而访问Web服务器的软件；目前主要是Internet Explorer（IE）和Netscape；HTML：超级文本标记语言（Hypertext Mark-up Language）标准的文本文件，不是编程语言，而是一种描述性的标记语言；如：安徽工业职业技术学院；HTTP：（Hypertext Transfers Protocol）超级文本（超级链接）的传输协议，是TCP/IP协议的一部分；这个协议管理Web浏览器如何向Web服务器请求文件，以及服务器如何将文件发送回来。FTP：（File Transfers Protocol）文件传输协议，在互联网上上传或下载文件的协议；通常需要输入IP地址、用户名、密码等；IIS：（Internet Information System）Internet信息服务器，用于配置和管理WEB站点的软件；能响应客户端用户的请求从而下载网页到客户端；IP地址：用于标识互联网上各类计算机和服务器的唯一地址，其由32位二进制组成，分成四段，每段8位，如：；子网掩码：用于通过与IP地址进行“与”操作来判断某两个IP地址是否位于同一个网内，如果在一个网内，则在网内查找，否则将数据包发送到路由器到外网查找；域名：是替代枯燥乏味的IP地址的一种分层次的表示方式；如：； ；域名服务器DNS：将域名解析为IP地址的服务器（具体原理可参考有关网络类书籍）；2、何为ASP ?ASP是Active Server Pages的简称，是微软公司开发的一套服务器，在这种环境中，通过在标准的HTML网页中嵌入和使用ASP内建对象和可安装组件ActiveX组件，并结合VBScript或JavaScript编程，即可建立动态的、交互的、功能强大的Web页面。主要运行于Windows NT或Windows 2000 server平台，其服务器为IIS4.0/5.0；扩展名为：.asp；3、ASP的执行方式静态网页：在客户端浏览地址栏目中键入某个网址，它会向Web服务器发送一个HTTP请求消息（包含消息头和消息体）；HTTP请求的第一行如下所示：GET //a.htm HTTP/1.1 这一行指定了一个被称为（method）的HTTP命令、文档的地址、HTTP协议的版本，还有一些有关浏览器的信息。Web服务器接收请求，处理请求，并发出响应。HTTP响应的第一行如下所示：HTTP/1.1 200 OK 状态码为“200”意味着成功，之后还有一些头信息用于指定当前的时间、服务器的类型、数据的类型，其后是所请求的数据。如果请求的页面文件的扩展名为HTM或HTML，则服务器直接从硬盘中读取所请求的页面文件，然后将其传送给客户端浏览器，客户端浏览器收到服务器传送的网页代码后，然后对其解释执行，从而显示网页的内容。IE浏览器（客户端）服务器IIS（ASP）/a.htmhttp请求窗口下载a.htm解释HTML网页元素 安徽动态网页：若扩展名为.ASP，从服务器中读取出所请求的文件，然后对其ASP脚本代码进行解释执行，生成新的HTML格式，与非ASP代码部分结合，产生动态的HTML网页,并且可以一些提供高级服务（数据库的存储、电子邮件的发送等）。Web服务器IIS（ASP）执行ASP部分Old htmlOld htmlIE浏览器（客户端）New html窗口http请求/a.aspOld html解释html网页元素数据库服务器（DB）邮件服务器（smtp）提示：服务器与客户端的位置关系有三种：1、在同一机器中（localhost或） 2、在局域网中 3、在互联网中4、ASP Web服务器的安装与配置（实验指导1）l 控制面板添加和删除程序添加和删除windows组件Internet信息服务将系统盘放入光驱中，安装后在“管理工具”中出现Internet信息服务器即可；l 主要需要配置Web服务器的根目录和默认主页文件。l 运行Dreamweaver MX 2004建立站点，完成相关的设置，其中根目录与IIS中一致，并使用服务器技术；5、程序举例（chapter01/myfirstpage.asp、showdate.asp）/myfirstpage.asp无标题文档 我是张山，大家好！我的Web服务器配置好了，我的IP地址是。请访问吧！这是我的第一个ASP网页 ！/showdate.asp无标题文档 现在日期： 课后问题：1、 请在有关书籍中或Internet中查找并补充有关网络有关概念和术语的详细内容；2、 现在有一家民营企业希望在互联网中拥有自己的网站来宣传自己的产品，你该做哪些事情呢？能有几种方案？费用多少？第二讲 HTML基础教学重点：1、HTML表单的应用；2、CSS层叠样式表的应用；教学要求：1、了解HTML语言与高级语言（如VB、C等）的区别；识记网页常用标记及属性，如标题、字体、段落、图像、超链接、表格等；2、熟练掌握HTML表单中各界面对象的标记符号和属性，如表单、文本域、列表域、复选框与单选钮、命令按钮等；3、熟练掌握在Dreamweaver中使用层叠样式表CSS；了解层叠样式表与标记属性的区别。教学内容：1、构建HTML网页（chapter02/section2/htmlpage.asp）标题function checkform() 函数体主体部分2、HTML标记的特点1、HTML是文本文件，标记符号均用括起来，大多数标记成对出现，结束标记多一个斜杠，其用法见其上；2、标记拥有自己的属性；安徽工业职业技术学院3、HTML标记可嵌套使用，不能交叉；Active sever page4、少数标记是单独使用如：、3、常用标记（图像、超链接和表格）安徽工业职业技术学院安徽工业职业技术学院单击此处文件下载 （chapter02/section3/download.asp）（chapter02/section4/myform.asp） 用户注册 用户名： 4、HTML的表单（chapter02/section4/myform.asp）两种表单数据的传递方法：GET和POST方法GET方法：将表单数据附加在Action属性指定的URL地址之后，并在URL地址与表单数据间加上一个“？”分割符，表单的各个数据项间用“&”分割符。 http:/localhost/test.asp?txtid=012&txtusename=ucauGET方式一次最多只能提交256个字符；POST方式是将表单数据作为一个独立的数据块直接发送给服务器；表单中的界面对象单行文本域隐藏域口令域单选按钮男女列表框 硕士以上 大学本科 大专 中专以下 按钮5、HML的其他常用标记；（chapter02/section5/duomeiti.asp、moveleft.asp）多媒体滚动的内容6 层叠样式表CSS（chapter02/section6/myform.asp）层叠样式表 (Cascading Style Sheet) 是一系列格式设置规则，它们控制 Web 页面内容的外观。术语 cascading 表示向同一个元素应用多种样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个 CSS 规则来应用边距，然后将两者应用于页面上的同一个文本。所定义的样式向下“层叠”到您的 Web 页面上的元素，并最终创建您想要的设计。优点1：使用 CSS 可以非常灵活并更好地控制具体的页面外观，从精确的布局定位到特定的字体和样式。CSS 允许您控制 HTML 无法独自控制的许多属性。例如，可以为选定的文本指定不同的字体大小和单位（像素、磅值等）。通过使用 CSS 以像素为单位设置字体大小，还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。除设置文本格式外，还可以使用 CSS 控制 Web 页面中块级别元素的格式和定位。例如，可以设置块级元素的边距和边框、其他文本周围的浮动文本等。优点2：它提供了便利的更新功能；更新一处的 CSS 规则时，使用该已定义样式的所有文档的格式都会自动更新为新样式。CSS 格式设置规则由两部分组成：选择器和声明。选择器是标识格式元素的术语（如 P、H1、类名或 ID），声明用于定义元素样式。在下面的示例中，H1 是选择器，介于括号 () 之间的所有内容都是声明：H1 font-size:16 pixels;font-family:Helvetica;font-weight:bold;声明由两部分组成：属性（如 font-family）和值（如 Helvetica）。上面的 CSS 规则为 H1 标签创建了一个特定的样式：链接到此样式的所有 H1 标签的文本都将是 16 个像素大小、Helvetica 字体和粗体。在 Dreamweaver 中可以定义以下样式类型：l 自定义 CSS 规则（也称为类样式）使您可以将样式属性应用于任何文本范围或文本块。（请参见应用类样式。） .mystyle font-family: 新宋体;font-size: 24px;font-weight: 300;color: #FF0000;l HTML 标签样式重定义特定标签（如 h1）的格式。创建或更改 H1 标签的 CSS 样式时，所有用H1标签设置了格式的文本都会立即更新。 H1 font-size:16 pixels;font-family:Helvetica;font-weight:bold;l CSS 选择器样式（高级样式）重新定义特定元素组合的格式设置，或重新定义 CSS 允许的其他选择器表单的格式设置（例如，每当 h2 标题出现在表格单元格内时都应用选择器 td h2）。高级样式还可以重新定义包含特定 id 属性的标签的格式设置（例如，#myStyle 定义的样式可应用于包含属性值对 id=myStyle 的所有标签）。 CSS 规则可以位于以下3个位置：l 内部（或嵌入式）CSS 样式表是一系列包含在 HTML 文档文件头部分的 style 标签内的 CSS 规则。body margin: auto;padding-top: 100px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;background-color: #FFCCFF;l 外部 CSS 样式表是一系列存储在一个单独的外部 CSS (.css) 文件（并非 HTML 文件）中的 CSS 规则。利用文档文件头部分中的链接，该文件被链接到 Web 站点中的一个或多个页面。l 内联样式是在标签的特定实例中在整个 HTML 文档内定义的。这是直接在标记符号中应用的样式的方法注意：手动设置的 HTML 格式设置会覆盖通过 CSS 应用的格式设置。要使 CSS 规则能够控制段落格式，必须删除所有手动设置的 HTML 格式。CSS 样式设置1. 定义 CSS 类型属性 2. 定义 CSS 样式背景属性 3. 定义 CSS 样式区块属性 4. 定义 CSS 样式方框属性 5. 定义 CSS 样式边框属性 6. 定义 CSS 样式列表属性 7. 定义 CSS 样式定位属性 8. 定义 CSS 样式扩展属性 课后问题：1、请访问“安徽工业职业技术学院”的首页，查看源代码，在这个页面中使用了哪些HTML标记语言，使用了哪些CSS样式；2、总结描述所有的CSS样式的应用，对于课堂上没有提到的CSS样式请查阅Dreamweaver的帮助信息；3、自己制作一个“用户信息注册界面”的表单，运用CSS样式编排其字体、色彩、格式等元素，并给其他同学浏览，至少五位同学表示赞赏表示成功；第三讲 JavaScript教学重点：1、JavaScript的语法特点，函数的定义、调用，变量的作用域；2、条件控制语句、循环控制语句；3、JavaScript中几个常用对象的应用；教学要求：1、回顾和复习以前C语言的基本语法知识；进一步加深理解Javascript语法知识；2、深刻理解有关函数中变量的作用域和各类控制语句的功能；3、理解和灵活运用JavaScript中常用的几个对象的属性和方法；教学内容：1、什么是JavaScript?JavaScript是Netscape公司推出的一种嵌入HTML文档的，基于对象的脚本描述语言。利用它可以进一步的增强网页的交互性、方便操作和控制各种浏览器对象，实现控制浏览器外观、状态和运行方式的目的。利用它还可以实现对用户所输入的数据进行有效性检验，从而减轻服务器的负担。其语法与C语言很相似。2、在网页中使用JavaScript window.alert(欢迎进入);如果一段javascript应用到多个网页，可以将其放入到扩展名称为：Js文本文件。在需要使用JavaScript的页面中插入方法：（chapter03/section1/javaexample.asp）3、JavaScript语法基础1、JavaScript的数据类型JavaScript提供四种基本的数据类型，分别为数值型、逻辑型、字符串型和undefined类型2、常量、变量（chapter03/section2/mathexpression.asp） var num=24,id=36; x=num+id; /Number(id) 结果为60 window.alert(x的值为：+x); /显示的结果为“2436”通过上例需要注意的问题：l Javascript语句区分大小写，语句以分号作为结束符号；l 用/来注释语句l 变量需要用var定义可以给多个变量赋初值；l 变量的类型转换，数值型转换成字符型进行连接运算；需要用类型转换函数。3、表达式l 条件表达式 (条件)?A：B（chapter03/section2/logicexpression.asp） age=20; man=(age=18)?adult:minor; window.alert(this man is a +man);l 算术表达式、关系表达式（=、=、=、=等）、逻辑表达式（&、|、!等）（chapter03/section2/samevalue.asp） document.write(3=3); /显示true document.write(3=3); /显示false4、函数：函数的定义：function 函数名（形式参数） 函数体return 表达式（chapter03/section2/ usefucntion.asp）函数的调用：格式1：varname=函数名（实际参数） /有返回值时用格式2：函数名（参数值） /无返回值时用JavaScript的函数采用传值方式进行传递；通常函数的定义是在部分举例：（chapter03/section2/ passvalue.asp）无标题文档 function cuberoot(num) num=Math.pow(num,1/3) return num; var x=27 window.alert(27的立方根为：+cuberoot(x)+,x=+x); 5、变量的作用域作用域是指定变量的存活范围，在JavaScript中，变量的作用域可分为过程级和页面级，其实质都是局部变量；l 在函数中运用var定义的变量只在函数体内有效，如果出现同名则屏蔽函数外的变量；l 如果未用var定义则使用函数外同名的变量，如果没有同名的函数外变量则此变量在函数外仍然有效。举例：（chapter03/section2/ varrange.asp） var x=13,y=29; function test() var num,y=10; /去掉num定义，则不会有错 num=x+y; x+ window.alert(内部的num的值为：+num); /显示为23 test(); window.alert(外部的num的值为：+num); /显示错误6、程序控制语句条件分支语句：其中的条件取逻辑值，数值的0为false，字符的“”为falseif (条件) 语句体1； else 语句体2；举例：（chapter03/section2/ control_if.asp） var a=3,b=4,c=,d=abc,e=true,f=0; if (a=b) document.write(条件成立！); /分别用其它变量来代替条件 else document.write(条件不成立！); switch(表达式) case 值： 语句举例：（chapter03/section2/ control_switch.asp） var curday=new Date(); switch(curday.getDay() case 1: document.write(星期一);break; case 2: document.write(星期二);break; case 3: document.write(星期三);break; case 4: document.write(星期四);break; case 5: document.write(星期五);break; case 6: document.write(星期六);break; case 0: document.write(星期日);break; 循环控制语句（chapter03/section2/ control_for.asp）l for循环 var s=0; for(var n=2;n=100;n+=2) s+=n; document.write(1-100间偶数的累加和为：+s);l while（chapter03/section2/ control_while.asp） var n=1; while(n=6) document.write(JavaScript); n+; l do while7、内置对象与函数（chapter03/section3/ date_array.asp）JavaScript是一种基于对象的脚本语言，每一个对象均有自己的属性和方法，传统的字符串和数学函数变成有关对象的方法；常用的内置对象有string对象、math对象、array和Datel StringVar 实例名=new String(“字符串”);Var msg=”字符串”;属性：msg.length方法：charat()、indexof()等l Math属性：数学常用的一些常量如：E、PI等方法：数学常用的函数如：sin(a) 、cos(a)、abs()等；l ArrayVar 数组名=new Array();Var 数组名=new Array(初值1、初值2等)数组的成员的编号从0开始，l DateVar 实例名=new Date();方法：getyear()/getmonth()/getdate()/getday()/gethours()/getminutes()/getseconds()eval()函数（chapter03/section3/ eval.asp）举例:无标题文档 function calculate(obj) obj.result.value=eval(obj.expression.value); 请输入要计算的表达式 表达式的值为： 课后问题：1、使用JavaScript编程实现：根据时间段的不同，在网页中显示不同的问候语，若小时数在12点以前，则输出“早上好！”的问候语；若在12点至18点，则输出“下午好！”；18点以后输出“晚上好！”。第四讲 浏览器对象教学重点：1、浏览器提供的对象；2、JavaScript语言中的事件处理；教学要求：1、深刻认识浏览器的功能和其提供的各种对象，了解这些对象所提供的各种方法；熟练在Javascript编程调用浏览器中对象实现常用的功能的方法；2、熟悉面向对象程序设计的工作原理，了解各类对象的事件响应从而实现动态交互式页面；1、浏览器对象JavaScript除了可以访问本身内置的各种对象外，还可以访问浏览器提供的对象，通过对这些对象的访问，可以得到当前网页以及浏览器本身的一些信息，并能完成有关的操作。浏览器窗口与网页之间，网页与网页各组成部分之间并是一种从属关系，他们大关系如下windowsframedocumentlocationlayerhistoryexternalimagesformslinks2、Window对象：该对象位于最顶层，是其它对象的父对象，每一个window对象代表着一个浏览器窗口，访问其内部的其它对象：window可以省考略Window.子对象1.子对象2.属性名或方法名如：window.document.login.username.value=”guest”;或document.login.username.value=”guest”;l 属性：status（chapter03/section4/ windowstatus.asp） window.status=欢迎访问光临本站!;方法：（chapter03/section4/ windowprompt.asp）l alert方法，没有返回值！l Confirm方法：返回逻辑值返回按“是”返回true，否则返回falsel Prompt：返回输入的值。举例： name=; name=mpt(请输入你的姓名:,name); window.alert(name+你好!下面要开始考试了!); if (window.confirm(你确实准备好了吗?) window.location.href=exam.asp; ;l open方法：（chapter03/section4/ windowopen.asp）用法：winhwnd=window.open(url,windowname,paralist)无标题文档 function openwin(url) var newwin=window.open(url,winname,toolbar=no,directories=no,menubar=no,scrollbars=yes,rdsizable=no,width=500,height=360); newwin.focus(); return(newwin); 作者简介l close方法：举例说明关闭l setTimeout方法：创建定时器，经过指定的毫秒后，自动调用指定的语句；l clearTimeout方法：清除定时器；（chapter03/section4/ clock.asp）时钟var timer;function clock() var timestr=; var now=new Date(); var hours=now.getHours(); var minutes=now.getMinutes(); var seconds=now.getSeconds(); timestr+=hours; timestr+=(minutes10)? :0 : :)+minutes; timestr+=(seconds10)? :0 : :)+seconds; window.document.frmclock.txttime.value=timestr; timer=setTimeout(clock(),1000); /设置定时器function stopit() clearTimeout(timer); 当前时间： l 将上述程序稍加更改，可以创建定时闹钟程序（chapter03/section4/ clertclock.asp）时钟var timer;function clock() var timestr=; var now=new Date(); var hours=now.getHours(); var minutes=now.getMinutes(); var seconds=now.getSeconds(); timestr+=hours; timestr+=(minutes10)? :0 : :)+minutes; timestr+=(seconds10)? :0 : :)+seconds; window.document.frmclock.txttime.value=timestr; if (window.document.frmclock.settime.value=timestr) window.alert(起床啦！); timer=setTimeout(clock(),1000);function stopit() clearTimeout(timer); 当前时间： 设定闹钟：