《ASP》课程设计教案

更新时间:2024-01-18 01:23:01 阅读量: 教育文库 文档下载

说明:文章内容仅供预览,部分内容可能不全。下载后的文档,内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的,是否完整无缺。

《ASP动态网页设计》

电子教案

系部:信息工程系 专业:计算机应用专业

第一讲 ASP的系统运行环境

教学重点:

1、ASP动态网页的工作基本原理;

2、Windows 2000 Server /XP IIS的安装与配置; 教学要求: 1、熟知有关ASP的基本概念和工作原理,如ASP、HTML、静态网页、动态网页、HTTP、PWS、IIS、IP地址等;理解静态网页和动态网页的区别。

2、熟练掌握ASP Web服务器的安装与运行环境的配置,特别是在Windows 2000 Server系统中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位,如:192.168.0.1;

子网掩码:用于通过与IP地址进行“与”操作来判断某两个IP地址是否位于同一个网内,如果在一个网内,则在网内查找,否则将数据包发送到路由器到外网查找;

域名:是替代枯燥乏味的IP地址的一种分层次的表示方式;如:www.ahip.cn;www.yahoo.com.cn ;

域名服务器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 /http://www.sohu.com/a.htm HTTP/1.1

这一行指定了一个被称为(method)的HTTP命令、文档的地址、HTTP协议的版本,还有一些有关浏览器的信息。

Web服务器接收请求,处理请求,并发出响应。HTTP响应的第一行如下所示:

HTTP/1.1 200 OK 状态码为“200”意味着成功,之后还有一些头信息用于指定当前的时间、服务器的类型、数据的类型,其后是所请求的数据。

如果请求的页面文件的扩展名为HTM或HTML,则服务器直接从硬盘中读取所请求的页面文件,然后将其传送给客户端浏览器,客户端浏览器收到服务器传送的网页代码后,然后对其解释执行,从而显示网页的内容。

IE浏览器(客户端) 服务器 IIS(ASP) http请求 http://www.sohu.com/a.htm 网页元素 解释HTML 下载a.htm 窗口

湖北??

??

动态网页:若扩展名为.ASP,从服务器中读取出所请求的文件,然后对其ASP脚本代码进行解释执行,生成新的HTML格式,与非ASP代码部分结合,产生动态的HTML网页,并且可以一些提供高级服务(数据库的存储、电子邮件的发送等)。 IE浏览器(客户端) Web服务器 窗口 http请求 数据库服 IIS(ASP) 务器(DB http://www.sohu.com/a.asp )执行ASP部分 Old html 网页元素 <% ?? 邮件服务New html 解释html %> 器(smtp) Old html Old html 提示:服务器与客户端的位置关系有三种:

1、在同一机器中(localhost或127.0.0.1) 2、在局域网中 3、在互联网中

4、ASP Web服务器的安装与配置

? 控制面板》》》添加和删除程序》》》添加和删除windows组件》》》Internet信息服务》》》

将系统盘放入光驱中,安装后在“管理工具”中出现Internet信息服务器即可; ? 主要需要配置Web服务器的根目录和默认主页文件。 ? 运行Dreamweaver MX 2004建立站点,完成相关的设置,其中根目录与IIS中一致,

并使用服务器技术;

5、程序举例(chapter01/myfirstpage.asp、showdate.asp)

//myfirstpage.asp

<%@LANGUAGE=\

无标题文档

我是张山,大家好!我的Web服务器配置好了,我的IP地址是192.168.0.1。请访问吧!这是我的第一个ASP网页 !

//showdate.asp

<%@LANGUAGE=\

无标题文档

课后问题:

1、 请在有关书籍中或Internet中查找并补充有关网络有关概念和术语的详细内容;

2、 现在有一家民营企业希望在互联网中拥有自己的网站来宣传自己的产品,你该做哪些事

情呢?能有几种方案?费用多少?

3、课后作业:教材中P13——1,2

第二讲 HTML 基础

教学重点:

1、HTML表单的应用;

2、CSS层叠样式表的应用; 教学要求:

1、了解HTML语言与高级语言(如VB、C等)的区别;识记网页常用标记及属性,如标题、字体、段落、图像、超链接、表格等;

2、熟练掌握HTML表单中各界面对象的标记符号和属性,如表单、文本域、列表域、复选框与单选钮、命令按钮等;

3、熟练掌握在Dreamweaver中使用层叠样式表CSS;了解层叠样式表与标记属性的区别。

教学内容:

1、构建HTML网页(chapter02/section2/htmlpage.asp) <%@LANGUAGE=\

标题

主体部分

2、HTML标记的特点

1、HTML是文本文件,标记符号均用<>括起来,大多数标记成对出现,结束标记

多一个斜杠,其用法见其上;

2、标记拥有自己的属性;

工程技术学院

3、HTML标记可嵌套使用,不能交叉;

Active sever page 4、少数标记是单独使用如:


3、常用标记(图像、超链接和表格) 控制

1、让浏览器正确显示不同格式的多媒体文件

2、定义网页语言(字符集)

5、让访问者忽视缓冲页面

工程技术学院

工程技术学院

(chapter02/section3/download.asp)

4、HTML的表单(chapter02/section4/myform.asp)

两种表单数据的传递方法:GET和POST方法

GET方法:将表单数据附加在Action属性指定的URL地址之后,并在URL地址与表单数据间加上一个“?”分割符,表单的各个数据项间用“&”分割符。

http://localhost/test.asp?txtid=012&txtusename=ucau GET方式一次最多只能提交256个字符;

POST方式是将表单数据作为一个独立的数据块直接发送给服务器; 表单中的界面对象 单行文本域

按钮

滚动的内容

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 中可以定义以下样式类型:

? 自定义 CSS 规则(也称为类样式)使您可以将样式属性应用于任何文本范围或文

本块。(请参见应用类样式。)

? HTML 标签样式重定义特定标签(如 h1)的格式。创建或更改 H1 标签的 CSS 样

式时,所有用H1标签设置了格式的文本都会立即更新。 H1 {

font-size:16 pixels; font-family:Helvetica; font-weight:bold;

}

? CSS 选择器样式(高级样式)重新定义特定元素组合的格式设置,或重新定义 CSS

允许的其他选择器表单的格式设置(例如,每当 h2 标题出现在表格单元格内时都应用选择器 td h2)。高级样式还可以重新定义包含特定 id 属性的标签的格式设置(例如,#myStyle 定义的样式可应用于包含属性值对 id=\的所有标签)。

CSS 规则可以位于以下3个位置:

? 内部(或嵌入式)CSS 样式表是一系列包含在 HTML 文档文件头部分的 style 标

签内的 CSS 规则。

? 外部 CSS 样式表是一系列存储在一个单独的外部 CSS (.css) 文件(并非 HTML

文件)中的 CSS 规则。利用文档文件头部分中的链接,该文件被链接到 Web 站点中的一个或多个页面。

? 内联样式是在标签的特定实例中在整个 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

如果一段javascript应用到多个网页,可以将其放入到扩展名称为:Js文本文件。 在需要使用\的页面中插入方法:(chapter03/section1/javaexample.asp)

通过上例需要注意的问题: ? Javascript语句区分大小写,语句以分号作为结束符号; ? 用//来注释语句 ? 变量需要用var定义可以给多个变量赋初值; ? 变量的类型转换,数值型转换成字符型进行连接运算;需要用类型转换函数。

3、表达式

? 条件表达式 (条件)?A:B(chapter03/section2/logicexpression.asp)

? 算术表达式、关系表达式(==、===、>=、<=等)、逻辑表达式(&&、||、!等)

4、函数: 函数的定义:

function 函数名(形式参数) {

函数体

return 表达式

}(chapter03/section2/ usefucntion.asp) 函数的调用:

格式1:varname=函数名(实际参数) //有返回值时用 格式2:函数名(参数值) //无返回值时用

JavaScript的函数采用传值方式进行传递;通常函数的定义是在部分 举例:(chapter03/section2/ passvalue.asp)

无标题文档

5、变量的作用域

作用域是指定变量的存活范围,在JavaScript中,变量的作用域可分为过程级和页面级,其实质都是局部变量;

? 在函数中运用var定义的变量只在函数体内有效,如果出现同名则屏蔽函数外的变量; ? 如果未用var定义则使用函数外同名的变量,如果没有同名的函数外变量则此变量在函

数外仍然有效。 举例:

6、程序控制语句

条件分支语句:其中的条件取逻辑值,数值的0为false,字符的“”为false if (条件) { 语句体1; } else { 语句体2; }

举例:(chapter03/section2/ control_if.asp)

switch(表达式) { case 值: 语句 }

举例:(chapter03/section2/ control_switch.asp)

循环控制语句(chapter03/section2/ control_for.asp) ? for循环

? while(chapter03/section2/ control_while.asp) ? do while

7、内置对象与函数(chapter03/section3/ date_array.asp)

JavaScript是一种基于对象的脚本语言,每一个对象均有自己的属性和方法,传统的字符串和数学函数变成有关对象的方法;常用的内置对象有string对象、math对象、array和Date

? String

Var 实例名=new String(“字符串”); Var msg=”字符串”; 属性: msg.length

方法:charat()、indexof()等 ? Math

属性:数学常用的一些常量如:E、PI等

方法:数学常用的函数如:sin(a) 、cos(a)、abs()等;

? Array

Var 数组名=new Array();

Var 数组名=new Array(初值1、初值2等) 数组的成员的编号从0开始, ? Date

Var 实例名=new Date(); 方法:

getyear()/getmonth()/getdate()/getday()/gethours()/getminutes()/getseconds()

eval()函数(chapter03/section3/ eval.asp) 举例:

无标题文档

课后问题:

1、使用JavaScript编程实现:根据时间段的不同,在网页中显示不同的问候语,若小时数在12点以前,则输出“早上好!”的问候语;若在12点至18点,则输出“下午好!”;18点以后输出“晚上好!”。

第四讲 浏览器对象

教学重点:

1、浏览器提供的对象;

2、JavaScript语言中的事件处理; 教学要求:

1、深刻认识浏览器的功能和其提供的各种对象,了解这些对象所提供的各种方法;熟练在Javascript编程调用浏览器中对象实现常用的功能的方法;

2、熟悉面向对象程序设计的工作原理,了解各类对象的事件响应从而实现动态交互式页面;

1、浏览器对象

JavaScript除了可以访问本身内置的各种对象外,还可以访问浏览器提供的对象,通过对这些对象的访问,可以得到当前网页以及浏览器本身的一些信息,并能完成有关的操作。 浏览器窗口与网页之间,网页与网页各组成部分之间并是一种从属关系,他们大关系如下

frame layer

windows document links location forms images history

external

2、Window对象:

该对象位于最顶层,是其它对象的父对象,每一个window对象代表着一个浏览器窗口,访问其内部的其它对象:window可以省考略

Window.子对象1.子对象2.属性名或方法名

如:window.document.login.username.value=”guest”; 或document.login.username.value=”guest”; ? 属性:status

方法:(chapter03/section4/ windowprompt.asp) ? alert方法,没有返回值!

? Confirm方法:返回逻辑值返回按“是”返回true,否则返回false ? Prompt:返回输入的值。 举例:

? open方法:(chapter03/section4/ windowopen.asp) 用法:winhwnd=window.open(url,windowname,paralist)

无标题文档

? close方法:举例说明

? setTimeout方法:创建定时器,经过指定的毫秒后,自动调用指定的语句; ? clearTimeout方法:清除定时器;(chapter03/section4/ clock.asp)

时钟

? 将上述程序稍加更改,可以创建定时闹钟程序(chapter03/section4/ clertclock.asp)

时钟

3、location对象:该对象包含有当前网页的URL(统一资源定位器,即网址)。 ? 属性: href 用于指定导航到的网页(chapter03/section4/ frontpage.asp)

举例:

4、history对象:该对象包含有最近10个网页的URL的地址。常用的方法为go(数值)方法,数值为负数往回,等价于浏览器中的“后退”。 举例:

(chapter03/section4/ nextpage.asp)

5、external对象:该对象有一个常用的addFavorite方法,利用该方法,可实现将指定的网

页添加到收藏夹中

(chapter03/section4/ externalpage.asp)

这是一个值得珍藏的网页!

onClick=\工程技术学院')\点击珍藏 6、document对象:代表当前网页,其常用方法为write用于在当前页面中输出HTML语句;

7、JavaScript的事件处理

(1)事件及响应方法

JavaScript采用了事件驱动的响应机制,用户在网页中的交互操作,将触发相应的事件,当事件发生时,系统会调用执行对应的事件处理函数。

事件:由系统预先定义好的,能被对象识别的一种动作。 事件的类别:系统事件(Load,Unload)和用户事件(MouseOver,MouseOut,MouseDown、MouseUp,Click,KeyDown,KeyUp等

事件的响应通过On与事件名称组成,比如Click事件,对应的事件为OnClick 事件句柄=事件处理函数()或语句

网页中各对象的常用事件 对象类别 网页对象 document 事件处理函数定义位置 或document.body 事件名称 Load Unload Contextmenu Selectstart MouseDown 事件出发条件 载入当前网页时触发 试图载入一个新的网页时触发 单击右键,弹出快捷菜单时触发 在网页中用鼠标拖动时触发 在网页中按下鼠标键时触发

表单 文本框 口令输入框 多行文地域