ASP动态网页设计教案.docx

《ASP动态网页设计教案.docx》由会员分享，可在线阅读，更多相关《ASP动态网页设计教案.docx（112页珍藏版）》请在冰豆网上搜索。

ASP动态网页设计教案

教案

课题

第1章ASP概述1.1—1.2

教学

目标

1.理解静态网页与动态网页的概念。

2.了解ASP的特点和工作过程。

3.了解ASP网页的组成要素。

教学重点

ASP的特点和工作过程

教学难点

ASP的特点和工作过程

教学时间

4课时

教具准备

计算机

周次

第一周

教学组织与实施

教师活动

学生活动

一、导入：

浏览者可以在网页上阅读信息，但无法进一步地发表意见、查询信息或进行在线交易等活动，这样的网页被称为静态网页。

网页不仅内容丰富多彩，而且可以与用户的操作进行互动而发生动态变化，此种网页被称为动态网页。

2、上课内容

一、静态HTML网页与动态网页

1、静态HTML网页

静态网页通常是用单纯的超文本标记语言（HTML）进行编写，并以.htm或者.html为文件扩展名进行保存的HTML文档。

静态网页中可以包含文字、图片，以及指向其他网页或文档的超链接等。

【案例1-1】简单静态HTML网页示例。

启动Windows操作系统附带的“记事本”程序，在打开的窗口中输入如下代码。

HelloWorld!

世界你好！

此种单纯使用HTML编写的网页在下载到浏览器后，所显示的内容及其格式是不会改变的，因而是静态的。

若在浏览器窗口的“查看”菜单下选择“源文件”命令，则可在打开的“记事本”窗口中看到与上面所输入的HTML代码完全一样的内容。

2、客户端动态网页

大多数网页还广泛采用DHTML（DynamicHTML）技术而使网页内容活动起来。

DHTML是一种在网页文档下载到浏览器后仍然能够控制网页中的HTML元素，使其变换表现效果的技术。

【案例1-2】客户端动态网页示例。

启动Windows操作系统的“记事本”程序，在打开的窗口中输入如下代码。

functiongetname（str）{alert（"您好!

"+str+"!

"）;}

请输入您的姓名：

3、服务器端动态网页

所谓“服务器端动态网页”是指在Web服务器端执行程序代码，并实现与客户端浏览器进行实时交互和动态数据传递的网页，服务器端可以实时处理客户端浏览器的请求，然后再将处理的结果作为对请求的响应传送给客户端浏览器。

目前大量采用ASP、JSP、PHP等动态交互网页技术，这些技术不仅具有良好的可编程性，而且不需编译即可直接运行，极大地提高了Web服务器的性能和网络应用程序的运行效率，所以是目前网站建设的主流技术。

二、ASP简介

1、ASP的特点

ASP是一套Web服务器端脚本程序开发工具和运行环境，可用来创建和运行各种动态、交互的Web服务应用程序。

ASP具有的主要特点如下。

使用VBScript或者JavaScript等简单易懂的脚本语言，结合HTML代码，即可快速方便地创建大多数Web应用程序。

使用简单的文本编辑器（如Windows操作系统的“记事本”程序）即可创建和编辑ASP程序，并且ASP程序无需编译，即可在服务器端直接执行。

ASP可使用服务器端的脚本程序来自动生成客户端的页面代码。

ASP提供了一些内置的对象，可用来从客户端的浏览器接收信息或将服务器处理后的响应信息发送给客户端的浏览器。

ASP提供了一些标准的ActiveX组件，同时允许用户添加或创建属于自己的ActiveX组件。

这些组件允许依据客户端浏览器的能力进行不同的显示，实现广告的轮换播放，并可在浏览器端包含计数器等。

ASP提供了与后台数据库连接和访问的功能，允许访问者通过客户端浏览器对站点的数据库进行存取访问，并且可以使得动态网页的内容随着相关数据库内容的变更而自动更新。

ASP程序的源代码不会被传送到客户端的浏览器，因而可以避免站点设计者所编写的源程序被他人剽窃，同时也提高了网络应用程序的安全性。

2、ASP的工作过程

ASP网页是一种包含服务器端脚本代码的网页文档，在发送到客户端浏览器之前，站点的Web服务器将对其中包含的脚本代码进行处理。

HTML是最简单和最基本的网页编写语言，使用纯粹的HTML标记只能创建静态网页。

当一个客户通过浏览器向站点的Web服务器请求静态HTML网页时，Web服务器将向客户端浏览器直接发送所请求的HTML文档而无需经过任何处理。

随后，客户端浏览器处理这个接收到的网页文档，并按照其中HTML代码的规定显示该文档的内容。

其工作过程如图1-3所示。

图1-3HTML静态网页工作过程

而当客户端浏览器向站点的Web服务器请求ASP网页时，Web服务器首先将ASP文档交给自身携带的ASP引擎，ASP文档中包含的服务器端脚本代码便在此处执行，并将执行结果转化为HTML代码，然后连同原有的HTML代码一起发送到客户端浏览器。

其过程如图1-4所示。

图1-4ASP动态网页工作过程

ASP网页文档与HTML网页文档是有本质区别的：

HTML文档是不需要经过任何处理就直接传送给客户端浏览器的，而ASP文档则需要对其中包含的每一个服务器端脚本代码进行处理并生成一个对应的HTML文档后才将其传送给客户端浏览器。

3、ASP组成要素

ASP组成要素如下：

1、HTML代码2．ASP内置对象3．ActiveX组件4．ASP脚本语言

学生听课做笔记

了解ASP动态、静态网页工作过程

教师活动

学生活动

三、小结

剩余时间让学生练习操作，对实训内容进一步了解

学生动手练习

板书设计

教学随笔

第1章ASP概述

1、静态网页与动态网页

2、ASP网页

本周内容主要介绍了理解静态网页与动态网页的概念，ASP的特点和工作过程以及ASP网页的组成要素，学生在了解理论的基础上完成实验课的操作，掌握基本代码的读取以及写入，为后面的学习奠定基础。

课题

第1章ASP概述1.3—1.4

教学

目标

1.掌握ASP运行平台的建立过程。

2.掌握ASP网页的创建与运行过程。

教学重点

ASP运行平台的建立过程

教学难点

ASP运行平台的建立过程

教学时间

4课时

教具准备

计算机

周次

第二周

教学组织与实施

教师活动

学生活动

导入：

ASP网页中包含了在服务器端运行的脚本代码程序，因而在开发和测试ASP应用程序之前，必须创建可供ASP应用程序运行的Web服务器工作平台。

上课内容：

一、ASP运行平台

1、IIS的安装

①打开WindowsXP操作系统的“控制面板”窗口，双击其中的“添加/删除程序”图标，打开“添加或删除程序”窗口，如图1-5所示。

②选择窗口左侧的“添加/删除Windows组件”选项，弹出“Windows组件向导”对话框，如图1-6所示。

③在“组件”列表框中选择“Internet信息服务（IIS）”复选框，然后单击“详细信息”按钮，弹出“Internet信息服务（IIS）”对话框，如图1-7所示。

④选中所有的选项，然后单击“确定”按钮回到前一个界面，再单击“下一步”按钮进行安装。

⑤在安装过程中，根据向导的提示将WindowsXP操作系统安装光盘放入光盘驱动器，然后单击“下一步”按钮，直至完成IIS的安装。

2、IIS默认网站

IIS安装完成后，打开Windows操作系统的“控制面板”窗口，双击其中的“管理工具”图标，再在打开的窗口中双击“Internet信息服务”图标，即可打开如图1-9所示的“Internet信息服务”窗口。

3、IIS网站属性的设置

（1）主目录的设置

在“网站属性”对话框的“主目录”选项卡（见图1-10）中，可对主目录进行如下设置。

（2）默认文档设置

在“网站属性”对话框的“文档”选项卡（见图1-11）中，用户可以根据需要将网站主目录中的若干个文档设置为候选的默认文档。

（3）IIS虚拟目录的创建

通过在某个网站之下创建虚拟目录的方式可将其他目录（非主目录）中的文件从逻辑上包含到该网站中来，从而使得其他目录中的文件内容也能够通过这个网站进行Web发布。

【案例1-3】在IIS默认网站中创建一个名为ch1的虚拟目录，并将其指向D盘“示例”文件夹下的ch1子文件夹。

具体创建步骤如下。

①在“Internet信息服务”窗口中，用鼠标右键单击要在其下创建虚拟目录的默认网站，在出现的快捷菜单中依次选择“新建”、“虚拟目录”命令，如图1-12所示。

②此时将弹出“虚拟目录创建向导”对话框，单击“下一步”按钮，在出现的“虚拟目录别名”对话框的“别名”文本框中输入要创建的虚拟目录名称ch1，如图1-13所示。

③单击“下一步”按钮，在弹出的“网站内容目录”对话框的“目录”文本框中输入要创建的虚拟目录所对应的物理目录路径，如图1-13所示。

④单击“下一步”按钮，在弹出的“访问权限”对话框中，设置访问这个虚拟目录时所允许的各项权限，如图1-14所示。

⑤单击“下一步”按钮，完成虚拟目录的创建。

在此之后，即可在“Internet信息服务”窗口左侧的当前网站目录树下看到这个新建的虚拟目录。

二、ASP网页的运行

需要注意的是，对于上面创建完成的1-4.asp文档，如果在客户端浏览器的地址栏中输入该文档的路径和文件名“D:

\示例\ch1\1-4.asp”，将发现浏览器窗口仅显示网页中的静态内容，如图1-15所示，并没有显示问候语，也没有将当前的日期与时间显示出来。

运行上述ASP网页的正确方法是在浏览器的地址栏中输入“http:

//127.0.0.1/ch1/1-4.asp”或者“http:

//localhost/ch1/1-4.asp”，则不仅可看到网页中的静态内容，而且可以看到问候语以及当前的日期与时间已经显示出来，如图1-16所示。

说明此时1-4.asp文档中的脚本代码已被服务器执行，浏览器中显示的是执行后发送过来的正确结果。

三、ASP网页编写工具

1．文本编辑器

几乎所有标准的文本编辑器都可以用来编写ASP网页文档代码，使用最多的是Windows操作系统的“记事本”程序，其方法是直接输入HTML标记和脚本语言代码，并以.asp为扩展名保存文件，然后在Web浏览器中输入此文件的URL将其打开。

2．专用Web应用开发工具

对于较为复杂的ASP应用程序，如果使用支持特定ASP开发功能的编辑器，如MicrosoftVisualInterDev或者Windows操作系统附带的脚本编辑程序MSE7.exe等，则效率也许会更高。

3．网页制作软件Dreamweaver

Dreamweaver是非常流行的可视化网页设计工具软件，具有所见即所得的用户界面，用户可以结合Flash、Fireworks等软件工具设计和制作各种非常漂亮的网页。

小结

1、剩余时间让学生练习操作，对实训内容进一步了解

2、在完成课本上的案例后，完成老师发给大家的操作练习题

学生听课做笔记

学生动手

练习操作

板书设计

教学随笔

第1章ASP概述

1、ASP运行平台

2、ASP网页的创建与运行

本周内容主要介绍了理解静态网页与动态网页的概念，ASP的特点和工作过程以及ASP网页的组成要素，学生在了解理论的基础上完成实验课的操作，掌握基本代码的读取以及写入，为后面的学习奠定基础。

课题

第2章HTML2.1—2.4

教学

目标

1.了解HTML的基本知识。

2.了解HTML文档的基本架构。

3.掌握HTML的常用标记。

教学重点

了解HTML的基本知识

教学难点

掌握HTML的常用标记

教学时间

4课时

教具准备

计算机

周次

第三周

教学组织与实施

教师活动

学生活动

导入：

浏览者可以在网页上阅读信息，但无法进一步地发表意见、查询信息或进行在线交易等活动，这样的网页被称为静态网页。

网页不仅内容丰富多彩，而且可以与用户的操作进行互动而发生动态变化，此种网页被称为动态网页。

上课内容：

一、HTML概述

1、什么是HTML

超文本标记语言（HyperTextMarkupLanguage，HTML）是构成网页最基本的要素，也是编写和开发各种Web应用程序的基础。

HTML不是一种编程语言，而是一种用来描述网页内容及其呈现形式的标记语言。

一个HTML元素的形式可表示为：

<标记名称属性名称=属性值…>内容

2、HTML文档基本架构

【案例2-1】HTML文档基本架构示例。

启动“记事本”程序，输入如下的HTML代码，然后将全部代码保存到“示例”文件夹下的ch2子文件夹中，命名为2-1.html文件。

享受工作！

享受生活！

标记用来标明一个HTML文档的开始，标记用来标明该文档的结束。

在和标记之间通常会有和两个下属HTML元素，其他的元素都被包含在这两个元素之中。

标记用来标识网页的头部，用来提供一些说明信息给浏览器，例如网页标题、搜索关键字、网页编码类型和网页作者等信息，浏览器不会把这些信息显示在网页的正文中。

除包括上述信息之外，还可以在元素中定义CSS样式表，插入所编写的脚本程序代码等。

（2）、元信息标记

标记是HTML文档头部标记中常见的元信息标记，可重复出现在头部标记中，分别用来指明当前网页的创作工具、作者、所采用的字符集、包含的关键字，以及其他一些网页描述信息。

5、HTML主体标记

标记是HTML文档的主体标记，可在其内使用各种标记标明在网页中显示的文字、图片、表格、超链接、表单等所有内容。

标记自身可以含有许多属性，用来定义当前页面的背景颜色、背景图像、网页文字的默认颜色、网页中超链接的颜色等。

表2-2列出了标记可以具有的一些属性及其简短说明。

以下是利用标记的各种属性对整个网页进行设置的例子。

设置整个页面的背景颜色为金色：

设置页面的背景图像为abc.jpg，且背景图像不随文字滚动：

设置页面与浏览器窗口的上边距为12像素，左边距为20像素：

二、HTML常用标记

1、标题文字标记

在HTML文档中，可分别使用h1、h2、h3、h4、h5、h6几个标记来设定网页文本中的标题和副标题文字，此种标记的设置格式为

标题文字

hn中的n表示标题文字的大小，其取值范围为1到6，此数越小则字体越大。

align属性用来指定标题文字的对齐方式，可指定为left（左对齐）、right（右对齐）或center（居中对齐），默认为left。

此类标题文字均将以粗体字显示，并在网页中独占一行。

【案例2-2】各种HTML标题标记应用示例。

将下面的代码保存为ch2子文件夹中的2-2.html文件，在IE浏览器中的运行结果如图2-2所示。

一级标题大小

二级标题大小

三级标题大小

五级标题大小

这是默认的正常文字大小

2、段落格式标记

（！

）、分段标记

该标记的设置格式为

文字

（2）段内换行标记

其设置格式为

文字

（3）水平线标记

其设置格式为

（4）文本缩排标记

该标记的设置格式为

文字

（5）居中对齐标记

该标记的设置格式为

【案例2-3】各种HTML段落标记应用示例。

将下面的代码保存为2-3.html，运行结果如图2-3所示。

请大家告诉大家:

本站图书品种繁多，适合各界读者，

每天都有特价图书，并有各种精美礼品相送！

3、文字格式标记

（1）字体标记

HTML文档使用标记来设置文本的字体、字号和文字颜色等，其设置格式为

文字

（2）文字修饰标记

在HTML文档中，还允许使用一些特定的文字修饰标记，这些标记的名称及其功能描述如表2-5所示。

将文字设置为粗体字

将文字设置为斜体字

设置为带有下画线的文字

设置为位于右上角的上标文字

设置为位于右下角的下标文字

强调其间的文字（通常显示为斜体）

强调其间的文字（通常显示为粗体）

【案例2-4】各种HTML字体格式标记应用示例。

将下面的代码保存为2-4.html，在IE浏览器中的运行结果如图2-4所示。

HTML可以设置的文字格式有多种，

每种格式都可以与其他格式混合使用。

B：

粗体字   

I：

斜体字   

U：

下画线

3号红色宋体

4号橙色隶书

5号绿色黑体

6号蓝色华文新魏

7号紫色华文彩云

4、列表标记

（1）．有序列表标记

有序列表元素以

标记开始，并以