ASP动态网页设计教案

上传人：王*** IP属地：广西上传时间：2023-05-07 格式：DOC 页数：103 大小：809.91KB 积分：18 举报 版权申诉

已阅读5页，还剩98页未读，继续免费阅读

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

文档简介

教案课题第1章ASP概述1.1—1.2教学目标理解静态网页与动态网页的概念。了解ASP的特点和工作过程。了解ASP网页的组成要素。教学重点ASP的特点和工作过程教学难点ASP的特点和工作过程教学时间4课时教具准备计算机周次第一周教学组织与实施教师活动学生活动一、导入：浏览者可以在网页上阅读信息，但无法进一步地发表意见、查询信息或进行在线交易等活动，这样的网页被称为静态网页。网页不仅内容丰富多彩，而且可以与用户的操作进行互动而发生动态变化，此种网页被称为动态网页。上课内容静态HTML网页与动态网页1、静态HTML网页静态网页通常是用单纯的超文本标记语言（HTML）进行编写，并以.htm或者.html为文件扩展名进行保存的HTML文档。静态网页中可以包含文字、图片，以及指向其他网页或文档的超链接等。【案例1-1】简单静态HTML网页示例。启动Windows操作系统附带的“记事本”程序，在打开的窗口中输入如下代码。<html><head><title>简单静态网页示例</title></head><body><palign="center"><fontcolor="blue">HelloWorld!</font></p><palign="center"><fontface="黑体">世界你好！</font></p></body></html>此种单纯使用HTML编写的网页在下载到浏览器后，所显示的内容及其格式是不会改变的，因而是静态的。若在浏览器窗口的“查看”菜单下选择“源文件”命令，则可在打开的“记事本”窗口中看到与上面所输入的HTML代码完全一样的内容。2、客户端动态网页大多数网页还广泛采用DHTML（DynamicHTML）技术而使网页内容活动起来。DHTML是一种在网页文档下载到浏览器后仍然能够控制网页中的HTML元素，使其变换表现效果的技术。【案例1-2】客户端动态网页示例。启动Windows操作系统的“记事本”程序，在打开的窗口中输入如下代码。<html><head><scriptlanguage="JavaScript">functiongetname(str){alert("您好!"+str+"!");}</script></head><body>请输入您的姓名：<form><inputtype="text"name="name"onBlur="getname(this.value)"value=""></form></body></html>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动态、静态网页工作过程

教师活动学生活动小结剩余时间让学生练习操作，对实训内容进一步了解学生动手练习板书设计教学随笔ASP概述静态网页与动态网页ASP网页本周内容主要介绍了理解静态网页与动态网页的概念，ASP的特点和工作过程以及ASP网页的组成要素，学生在了解理论的基础上完成实验课的操作，掌握基本代码的读取以及写入，为后面的学习奠定基础。课题第1章ASP概述1.3—1.4教学目标掌握ASP运行平台的建立过程。掌握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网页的正确方法是在浏览器的地址栏中输入“/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．网页制作软件DreamweaverDreamweaver是非常流行的可视化网页设计工具软件，具有所见即所得的用户界面，用户可以结合Flash、Fireworks等软件工具设计和制作各种非常漂亮的网页。小结1、剩余时间让学生练习操作，对实训内容进一步了解2、在完成课本上的案例后，完成老师发给大家的操作练习题学生听课做笔记学生动手练习操作板书设计教学随笔ASP概述ASP运行平台ASP网页的创建与运行本周内容主要介绍了理解静态网页与动态网页的概念，ASP的特点和工作过程以及ASP网页的组成要素，学生在了解理论的基础上完成实验课的操作，掌握基本代码的读取以及写入，为后面的学习奠定基础。课题第2章HTML2.1—2.4教学目标了解HTML的基本知识。了解HTML文档的基本架构。掌握HTML的常用标记。教学重点了解HTML的基本知识教学难点掌握HTML的常用标记教学时间4课时教具准备计算机周次第三周教学组织与实施教师活动学生活动导入：浏览者可以在网页上阅读信息，但无法进一步地发表意见、查询信息或进行在线交易等活动，这样的网页被称为静态网页。网页不仅内容丰富多彩，而且可以与用户的操作进行互动而发生动态变化，此种网页被称为动态网页。上课内容：一、HTML概述什么是HTML超文本标记语言（HyperTextMarkupLanguage，HTML）是构成网页最基本的要素，也是编写和开发各种Web应用程序的基础。HTML不是一种编程语言，而是一种用来描述网页内容及其呈现形式的标记语言。一个HTML元素的形式可表示为：<标记名称属性名称=属性值…>内容</标记名称><imgsrc=cup.gifwidth=“300”height=“200”>2、HTML文档基本架构【案例2-1】HTML文档基本架构示例。启动“记事本”程序，输入如下的HTML代码，然后将全部代码保存到“示例”文件夹下的ch2子文件夹中，命名为2-1.html文件。<html><head><title>简单示例网页</title></head><body><imgsrc=cup.gif>享受工作！享受生活！</body></html> <html>标记用来标明一个HTML文档的开始，</html>标记用来标明该文档的结束。在<html>和</html>标记之间通常会有<head>和<body>两个下属HTML元素，其他的元素都被包含在这两个元素之中。· <head>标记用来标识网页的头部，用来提供一些说明信息给浏览器，例如网页标题、搜索关键字、网页编码类型和网页作者等信息，浏览器不会把这些信息显示在网页的正文中。除包括上述信息之外，还可以在<head>元素中定义CSS样式表，插入所编写的脚本程序代码等。 <title>标记被包含在<head>元素内，用来指定在浏览器窗口标题栏中显示的网页标题文字，原则上不应该省略，因为它还有其他用途，例如作为网页的标签，或被当做搜索引擎寻找的索引。· <body>标记用来标识HTML文档的主体部分，其中的内容即为需要显示在浏览器窗口内的各种文本、图像、超链接、表格、表单等元素，有关这些元素的定义和设置将在本章后面详细说明。3、HTML文档书写规则下面是关于书写HTML文档的一些规定。· 一般说来，HTML文档的内容是不区分字母大小写的。然而新的Web标准则规定HTML的标记名称和属性名称都应该使用小写字母。· 对于HTML文档中多个连续的空格、Tab键或Enter键，浏览器将视其为一个空格，除非它们被置于特定的<pre>标记之内。· 在一个元素的开始标记中，元素名称及其各个属性名称之间应该以空格、Tab键或Enter键隔开。标记中的属性值需要用半角的双引号或单引号将其括起来。· 一行中可以书写多个元素，一个元素也可以分多行书写。浏览器只认定HTML标记特有的“<”与“>”符号。· 可以使用“”标记将文档中的注解内容括起来，浏览器对此种注释标记中的内容不予处理和显示。对于HTML文档中书写错误的元素或者属性，浏览器将会跳过它而不予理会。· 各个HTML标记之间的关系可以是嵌套的，但不能是交错的。例如：<center><table>…</table></center>的形式是正确的；而<center><table>…</center></table>的形式是错误的。4、HTML头部标记HTML头部标记以<head>标记开始，并以</head>标记结束，在该标记中可以包含一些特定的子标记来对当前网页进行描述，例如网页的标题、一些页面说明信息和搜索关键字等。此外还可以在头部标记中设定样式表，插入所需的脚本语言代码等。一般说来，位于头部标记中的内容都不会在网页中直接显示，而是通过另外的方式起作用。（1）网页标题标记<title>标记是头部标记中最常用的子标记，用来设定本网页在浏览器窗口标题栏上显示的标题文字。每个网页通常都应该为其设定一个标题，其设置格式为<title>标题文字</title>（2）、元信息标记<meta>标记是HTML文档头部标记中常见的元信息标记，可重复出现在头部标记中，分别用来指明当前网页的创作工具、作者、所采用的字符集、包含的关键字，以及其他一些网页描述信息。5、HTML主体标记<body>标记是HTML文档的主体标记，可在其内使用各种标记标明在网页中显示的文字、图片、表格、超链接、表单等所有内容。<body>标记自身可以含有许多属性，用来定义当前页面的背景颜色、背景图像、网页文字的默认颜色、网页中超链接的颜色等。表2-2列出了<body>标记可以具有的一些属性及其简短说明。以下是利用<body>标记的各种属性对整个网页进行设置的例子。设置整个页面的背景颜色为金色：<bodybgcolor="gold">设置页面的背景图像为abc.jpg，且背景图像不随文字滚动：<bodybackground="abc.jpg"bgproperties="fixed">设置页面与浏览器窗口的上边距为12像素，左边距为20像素：<bodytopmargin="12"leftmargin="20">二、HTML常用标记1、标题文字标记在HTML文档中，可分别使用h1、h2、h3、h4、h5、h6几个标记来设定网页文本中的标题和副标题文字，此种标记的设置格式为<hnalign=对齐方式>标题文字</hn>hn中的n表示标题文字的大小，其取值范围为1到6，此数越小则字体越大。· align属性用来指定标题文字的对齐方式，可指定为left（左对齐）、right（右对齐）或center（居中对齐），默认为left。· 此类标题文字均将以粗体字显示，并在网页中独占一行。【案例2-2】各种HTML标题标记应用示例。将下面的代码保存为ch2子文件夹中的2-2.html文件，在IE浏览器中的运行结果如图2-2所示。<html><head><title>设置标题文字示例</title></head><body><h1>一级标题大小</h1><h2align="center">二级标题大小</h2><h3>三级标题大小</h3><h5>五级标题大小</h5>这是默认的正常文字大小</body></html>2、段落格式标记（！）、分段标记该标记的设置格式为<palign=对齐方式>文字</p>（2）段内换行标记其设置格式为文字<br/>（3）水平线标记其设置格式为<hrsize=粗细align=对齐方式width=宽度color=颜色/>（4）文本缩排标记该标记的设置格式为<blockquote>文字</blockquote>（5）居中对齐标记该标记的设置格式为<center>文本、图像或表格</center>【案例2-3】各种HTML段落标记应用示例。将下面的代码保存为2-3.html，运行结果如图2-3所示。<html><head><title>各种段落标记应用示例</title></head><body><center><h3>欢迎光临！</h3><p>本站备有各种图书和音像制品，<br/>价格公道，童叟无欺，欢迎选购！</p></center><hrsize="5"color="blue"/>请大家告诉大家:<blockquote>本站图书品种繁多，适合各界读者，每天都有特价图书，并有各种精美礼品相送！</blockquote></body></html>3、文字格式标记（1）字体标记HTML文档使用<font>标记来设置文本的字体、字号和文字颜色等，其设置格式为<fontsize=大小face=字体名称color=颜色>文字</font>（2）文字修饰标记在HTML文档中，还允许使用一些特定的文字修饰标记，这些标记的名称及其功能描述如表2-5所示。<b>将文字设置为粗体字<i>将文字设置为斜体字<u>设置为带有下画线的文字<sup>设置为位于右上角的上标文字<sub>设置为位于右下角的下标文字<em>强调其间的文字（通常显示为斜体）<strong>强调其间的文字（通常显示为粗体）【案例2-4】各种HTML字体格式标记应用示例。将下面的代码保存为2-4.html，在IE浏览器中的运行结果如图2-4所示。<html><head><title>各种字体格式应用示例</title></head><body><p><fontsize="5"color="#0000FF"face="方正舒体">HTML可以设置的文字格式有多种，<br/>每种格式都可以与其他格式混合使用。</font></p><fontsize="3">B：<b>粗体字</b></font> <fontsize="3">I：<i>斜体字</i></font> <fontsize="3">U：<u>下画线</u></font><hrsize="4"align="center"width="88%"/><fontsize="3"face="宋体"color="#FF0000">3号红色宋体</font><br/><fontsize="4"face="隶书"color="#FF9900">4号橙色隶书</font><br/><fontsize="5"face="黑体"color="#00FF00">5号绿色黑体</font><br/><fontsize="6"face="华文新魏"color="#0000FF">6号蓝色华文新魏</font><br/><fontsize="7"face="华文彩云"color="#800080">7号紫色华文彩云</font></body></html>4、列表标记（1）．有序列表标记有序列表元素以<ol>标记开始，并以</ol>标记结束，其间包含的各个列表项分别用<li>进行标记。有序列表元素的标记设置格式为<oltype=序号类型start=开始序号><litype=序号类型>列表项1</li><litype=序号类型>列表项2</li>…<litype=序号类型>列表项n</li></ol>(2)无序列表标记无序列表元素以<ul>标记开始，并以</ul>标记结束。其间包含的各个列表项分别用<li>加以标记。无序列表元素的设置格式为<ultype=项目符号类型><litype=项目符号类型>列表项1</li><litype=项目符号类型>列表项2</li>…<litype=项目符号类型>列表项n</li></ul>【案例2-5】HTML列表标记应用示例。将下面的代码保存为2-5.html，在IE浏览器中的运行结果如图2-5所示。<html><head><title>列表标记应用示例</title></head><body><h2align="center"><fontface="华文彩云">欢迎光临网上书城</font></h2><fontface="华文楷体"><i>畅销书排行榜：</i></font><oltype="1"><li>电子商务网站建设</li><li>网页程序设计实例教程</li><li>信息系统分析与设计</li></ol><fontface="华文楷体"><i>今日特价图书：</i></font><ultype="square"><li>向左走，向右走</li><li>失踪的网络作家</li><li>非典时期的非典型生活</li></ul></body></html>5、列表的嵌套【案例2-6】HTML列表嵌套示例。在一个有序列表中嵌套一个无序列表，将代码保存为2-6.html，运行结果如图2-6所示。<html><head><title>列表嵌套示例</title></head><body><h3>畅销书排行榜：</h3><oltype="1"><li>文艺类图书</li><ultype="disc"><li>向左走，向右走</li><li>失踪的网络作家</li><li>非典时期的非典型生活</li></ul><li>商务管理类图书</li><li>信息技术类图书</li></ol></body></html>6、图像标记图像或者图片是网页中常见的HTML元素，使用<img>标记可以把指定的图片添加到网页中。<img>标记的设置格式为<imgsrc=图片文件的URLalign=对齐方式border=边框宽度alt=说明性替代文字height=图像高度width=图像宽度hspace=水平边距vspace=垂直边距/>【案例2-7】HTML图像标记应用示例。将下面的代码保存为2-7.html，在IE浏览器中的运行结果如图2-7所示。<html><head><title>图像标记应用示例</title></head><bodyleftmargin="35"><p>数学家：祖冲之<imgborder="0"src="zcz.jpg"width="108"height="136"/></p></body></html>7、超链接标记HTML使用<a>作为超链接标记，在网页中设置超链接的格式为<ahref=URL>用作超链接锚点的文字或图像</a>【案例2-8】HTML超链接标记应用示例。将下面的代码保存为2-8.html，在IE浏览器中的运行结果如图2-8所示。<html><head><title>图像标记应用示例</title></head><bodyleftmargin="35"><p>数学家：祖冲之<imgborder="0"src="zcz.jpg"width="108"height="136"/></p></body></html>三、HTML表格标记1、表格应用举例【案例2-9】HTML表格标记应用示例。将下面的代码保存为2-9.html，在IE浏览器中的运行结果如图2-9所示。<html><head><title>普通表格示例</title></head><body><center><p><fontface="楷体_GB2312"size="4"color="#800080">商品一览表</font></p><tablewidth="271"height="92"border="1"bgcolor="skyblue"><tr><thwidth="110"align="left">商品名称</th><thwidth="62">产地</th><thwidth="77"align="right">单价</th> </tr><tr><td>平板电视机</td><tdalign="center">大连</td><tdalign="right">¥12,698</td></tr><tr><td>三门冰箱</td><tdalign="center">南京</td><tdalign="right">¥5,598</td></tr><tr><td>全自动洗衣机</td><tdalign="center">合肥</td><tdalign="right">¥5,188</td></tr></table></center></body></html>2、框架嵌套举例【案例2-12】HTML框架嵌套应用示例。本例是在上述2-11.html框架网页的基础上再加入一个顶端框架，从而形成“T”字形的嵌套框架页面。为此，首先需要将原有的2-11.html文档代码做如下修改，并另存为2-12.html文档。<html><head><title>框架嵌套示例</title></head><framesetrows="60,*"frameborder="no"><framename="topFrame"src="2-12_top.html"scrolling="no"><framesetcols="139,*"><framename="contents"target="main"src="2-11_left.html"scrolling="no"><framename="main"src="2-11_right.html"></frameset></frameset></html>学生听课做笔记

教师活动学生活动小结剩余时间让学生练习操作，对实训内容进一步加深了解学生动手练习板书设计教学随笔HTML2.1—2.4HYML概述HTML常用标记HTML表格标记HTML框架标记本周内容主要介绍了了解HTML的基本知识、了解HTML文档的基本架构以及掌握HTML的常用标记。学生在了解理论的基础上完成实验课的操作，掌握基本代码的读取以及写入，为后面的学习奠定基础。课题第2章HTML2.5—2.7教学目标熟悉HTML的框架标记。熟悉HTML的表单标记。了解CSS样式表及其基本应用方式教学重点熟悉HTML的表单标记教学难点CSS样式表及其基本应用方式教学时间4课时教具准备计算机周次第四周教学组织与实施教师活动学生活动导入：框架标记用来将整个浏览器窗口划分为多个不同的矩形区域，在每一个区域内可以独立显示与区域外不同的网页文档内容，从而获得一种特定的页面布局效果。上课内容：一、HTML框架标记1、框架定义格式HTML框架元素的定义格式为<framesetcols=框架列数及各列宽度rows=框架行数及各行高度bordercolor=边框颜色frameborder=框架边框framespacing=框架间距><framename=框架名称target=目标框架src=URLborder=边框宽度bordercolor=边框颜色scrolling=是否显示滚动条><frame…>…</frameset>2、简单框架举例【案例2-11】简单HTML框架应用示例，本示例由3个HTML文档构成。（1）首先使用下面的代码创建一个定义左、右两个框架的HTML网页文档，将这些代码保存为2-11.html文件。<html><head><title>简单框架示例</title></head><framesetcols="30%,*"><framename="contents"target="main"src="2-11_left.html"><framename="main"src="2-11_right.html"></frameset></html>（2）接下来，使用下面的代码创建一个在左侧框架内显示的HTML网页文档，命名为2-11_left.html，该文档的主要内容是使用<a>标记定义多个超链接。<html><head><basetarget="main"></head><bodyleftmargin="22"topmargin="26"bgcolor="#FFFF99"><h4>掌握HTML</h4><p><ahref="2-3.html">段落标记示例</a></p><p><ahref="2-4.html">字体格式示例</a></p><p><ahref="2-5.html">列表标记示例</a></p><p><ahref="2-7.html">图像标记示例</a></p><p><ahref="2-8.html">超链接示例</a></p></body></html>（3）最后，再使用下面的代码创建一个用于在右侧框架内显示的HTML网页文档，命名为2-11_right.html，这个文档仅在最初载入时显示。<html><head></head><bodytopmargin="60"><palign="center"><fontcolor="#0000FF"size="6"face="方正舒体">HTML标记<br/><br/>应用范例展示</font></p></body></html>将以上3个HTML文档保存到ch2子文件夹中，在IE浏览器中打开2-11.html文档后就将显示一个具有左、右两个框架的网页。3、框架嵌套举例【案例2-12】HTML框架嵌套应用示例。本例是在上述2-11.html框架网页的基础上再加入一个顶端框架，从而形成“T”字形的嵌套框架页面。<html><head><title>框架嵌套示例</title></head><framesetrows="60,*"frameborder="no"><framename="topFrame"src="2-12_top.html"scrolling="no"><framesetcols="139,*"><framename="contents"target="main"src="2-11_left.html"scrolling="no"><framename="main"src="2-11_right.html"></frameset></frameset></html>二、HTML表单标记1、表单定义格式在HTML文档中，以<form>开始并以</form>结束的标记块用来定义一个表单元素。HTML表单的定义格式为<formname=表单名action=服务器端程序method=信息递交方式></form>2、常用表单域标记（1）．<input>标记<input>标记是最常用的表单域标记，该标记包括多个属性，且没有对应的结束标记。<input>标记的定义格式为<inputname=表单域名称type=表单域类型value=字符串size=大小maxlength=最多字符数/>（2）．<select>标记以<select>开头并以</select>结束的标记块用来在表单中定义一个列表框元素或者下拉列表框元素。<select>标记的定义格式为<selectname=表单域名称size=大小multiple=可选多少项><option>列表项文字</option><option>列表项文字</option>…</select>（3）．<textarea>标记<textarea>标记用来在表单中定义一个可以输入多行文字的编辑框，或称为多行文本框。其定义格式为<textareaname=表单域名称rows=行数cols=列数value=字符串>默认的多行文本</textarea>3、表单应用举例【案例2-13】下面的HTML文档说明了如何创建一个含有各种常用表单域的表单，为方便说明，在每行代码前添加了编号。代码保存为2-13.html，具体代码如课本所示。三、HTML其他标记1、动态文字标记HTML的<marquee>标记可用来在网页中添加不断滚动的字幕，并可设置文字的移动方向、移动速度和移动方式。该标记的定义格式为<marqueebgcolor=背景颜色behavior=移动方式direction=移动方向align=对齐方式scrollamount=移动速度scrolldelay=停顿时间height=高度width=宽度hspace=水平边距vspace=垂直边距></marquee>【案例2-14】HTML动态文字标记示例。代码保存为2-14.html，代码如课本所示。2、区块标记<div>标记具有下列强大的功能：区块中所有的HTML元素将作为一个整体进行格式设置与布局。· 能够以像素为单位，精确控制整个区块在网页中的位置。· 可以控制整个区块的内容在网页中显示或隐藏。· 网页中多个区块的内容可以相互重叠。<div>标记的定义格式为【案例2-15】HTML区块标记应用示例。下面的HTML代码是利用<div>标记创建具有两个层的页面，这两个层分别显示自己的内容和背景颜色并且相互重叠。代码保存为2-15.html，运行结果如课本所示。3、多媒体信息标记使用<bgsound>标记可在网页中添加背景音乐，该标记的定义格式为<bgsoundsrc=音乐文件的URLloop=播放方式>使用<embed>标记可在网页中嵌入各种多媒体信息元素。四、HTML文档样式 1．CSS语句的基本格式CSS语句的基本格式为选择器{属性1:属性值1[;属性2:属性值2…]}2．常用CSS属性课本表2-6给出了常用的CSS属性名称及其简短说明。3．定义与应用CSS的3种方式第一种方式是在HTML文档的头部分别为文档中的若干种元素定义样式。第二种方式是在文档的主体部分对个别元素单独定义样式。第三种方式是首先编写包含若干样式定义语句的外部样式表文件，然后再将此样式表文件连接到需要应用这些样式的HTML文档中。4、用CSS技术创建导航条【案例2-21】用CSS技术创建导航条示例。代码保存为2-19.html，运行结果如图2-19所示。学生听课做笔记

教师活动学生活动小结剩余时间让学生练习操作，完成课本案例内容，并能够通过案例内容加深对代码的认识学生动手练习板书设计教学随笔第2章HTMLHTML表单标记HTML其他标记HTML文档样式本周内容主要介绍了熟悉HTML的框架标记、HTML的表单标记和CSS样式表及其基本应用方式，通过本章的学习，学生能够自己制作一个用户注册界面并能自己扩展相关知识课题第3章VBScript脚本语言3.1-3.3教学目标掌握VBScript的数据类型。掌握VBScript的常量和变量。掌握VBScript的各种运算符。教学重点VBScript的常量和变量教学难点VBScript的常量和变量教学时间4课时教具准备计算机周次第六周教学组织与实施教师活动学生活动导入：像其他各种程序设计语言一样，VBScript提供了相当多的内部函数供脚本程序设计者调用。上课内容：一、VBScript概述1、什么是VBScriptVBScript（MicrosoftVisualBasicScriptingEdition）是VisualBasic语言的一个子集，它并不是一个完整的程序设计语言，仅包含语言中的一些基本功能。VBScript的最大优点是：用纯文本建立，直接包含在HTML文档或ASP文档中，编辑和修改都十分方便。2、用VBScript开发客户端脚本【案例3-1】开发简单客户端脚本程序示例。在“记事本”窗口中输入如下代码，并将其命名为3-1.html并保存到“示例”文件夹下的ch3子文件夹中。<html><head><title>客户端脚本举例</title><scriptLANGUAGE="VBScript"></script></head><body></body></html>3、用VBScript开发服务器端脚本用VBScript编写的脚本代码同样可以添加到HTML标记中，形成在Web服务器端运行的ASP文档。然而在此种文档中，VBScript脚本代码必须写在成对的“<%”和“%>”标识符之间。【案例3-2】简单服务器端脚本开发示例。在Windows操作系统的“记事本”窗口中输入如下代码，并将其命名为3-2.asp文件加以保存。<%@LANGUAGE="VBScript"%><html><head><title>服务器端脚本举例</title></head><body><%Fori=3to6%><fontsize=<%=i%>>传承文明！开拓进取!<br/></font><%Next%></body></html>4、VBScript代码书写规则· 使用VBScript代码编写的脚本程序由一条或多条语句组成，语句中可以包括命令词、常量、变量、函数、运算符和运算式等。· 在VBScript脚本代码中可以包含注释语句，此种语句仅作为说明之用，在程序运行时并不执行。编写客户端运行的脚本程序时，注释语句应被包含在“”之间。编写服务器端运行的脚本程序时，注释语句则应由单引号（'）开头，在其后可以书写任何注释文字。VBScript语句以行的形式编写，一条长语句在一行中写不下时，可在每行的尾部添加下画线“_”而分开写在多行上。· VBScript代码中的英文字母不区分大小写。· VBScript脚本语言不是一种独立的编程语言，必须依附其他代码而存在。· VBScript脚本语言代码是一种纯文本，可以用任何一种文本编辑器编写。二、VBScript语法基础1、VBScript数据类型VBScript只有一种数据类型，称为Variant（变体类型）。Variant是一种特殊的可变数据类型，根据具体的使用方式，它可以包含不同类别的信息。Variant包含的不同数据类型称为数据子类型，表3-1列出了Variant所包含的各种数据子类型及其简单说明。2、VBScript常量常量是在程序执行过程中其值从不发生变化的数据。在VBScript中，常量分为普通常量和符号常量。普通常量无需定义即可使用，如数字常量61.8、字符常量“网络世界”等。符号常量是一个具有一定含义的名称，用于代替数字或字符串。例如：ConstMyString="这是一个字符串。"ConstMyAge=283、VBScript变量（1）变量的声明对程序中所使用的变量，建议事先进行声明。在脚本代码中对变量进行显式声明的方式是使用Dim语句，也可以使用Public语句声明公用变量或者使用Private语句声明局部变量。（2）变量命名规则变量名只能由英语字母、数字和下画线组成。· 变量名第一个字符必须是英语字母。· 变量名中不能包含嵌入的句点。· 变量名长度不能超过255个字符。· 变量名不能和VBScript的保留字同名。· 变量名在被声明的作用域内必须唯一。（3）给变量赋值可以使用表达式给变量赋值，变量名在赋值号（=）的左边，要赋的值（表达式）在赋值号（=）的右边。（4）数组变量多数情况下，只需为所声明的变量赋一个值，只包含一个值的变量被称为标量变量。4、VBScript运算符VBScript有一套完整的运算符，包括算术运算符、比较运算符、字符串连接运算符和逻辑运算符。表3-2列出了VBScript的各种运算符。三、VBScript输入与输出1、输出语句MsgBoxVBScript语言提供了一个MsgBox语句来输出指定的数据和提示信息。其基本格式为其中，MsgBox为该语句的命令词，提示信息将显示在弹出的对话框中，可以是字符串常量，变量或者它们的组合。【案例3-3】MsgBox输出语句应用示例。代码保存为3-3.html文件，在IE浏览器中的运行结果如图3-3所示。<html><head><title>MsgBox语句举例</title><scriptLANGUAGE="VBScript"></script></head><body></body></html>2、输入函数InputBox()输入函数InputBox()的作用是产生一个等待用户输入数据的对话框，待用户在其中输入数据并确认后，就将所输入内容赋给一个指定的变量。InputBox()的基本应用格式为<变量>=InputBox(<提示信息>[,<标题>])【案例3-4】利用InputBox函数输入一串文字。代码保存为3-4.html文件，在IE浏览器中的运行效果如图3-4所示。<html><head><title>InputBox函数举例</title><scriptLANGUAGE="VBScript"></script></head><body></body></html>3、输出函数MsgBox()输出函数MsgBox()的作用与输出语句MsgBox类似，也是弹出一个显示指定数据或提示信息的对话框。此外，该函数还将返回一个数据，用来表示用户在此对话框中所点击的不同按钮，并将返回值赋给指定的变量。MsgBox()函数的语法格式为<变量>=MsgBox(<提示信息>[,<按钮>][,<标题>])【案例3-5】使用MsgBox函数输出不同类型消息框示例。代码保存为3-5.html文件，运行后将先后弹出如图3-5所示的4个消息框。<html><head><title>MsgBox函数举例</title><scriptLANGUAGE="VBScript"></script></head><body></body></html>4、利用Write方法输出利用MsgBox语句或者MsgBox()函数只能以消息框的形式进行输出，具有其局限性。事实上，在编写客户端脚本程序时，还可以利用文档对象所提供的Write方法直接在浏览器窗口中进行输出。此种输出方式的语句格式为Document.Write<输出内容>另外，在编写服务器端脚本程序时，则可以利用ASP所提供的Response对象的Write方法将指定的输出内容发送到浏览器窗口中输出。此种输出方式的语句格式为Response.Write<输出内容>小结剩余时间让学生练习操作，对实训内容进一步了解学生听课做笔记学生动手练习板书设计教学随笔VBScript脚本语言概述语法基础VBScript输入与输出本周内容主要介绍了VBScript的相关知识，通过课程的学习，学生掌握VBScript的数据类型、并且能够掌握VBScript的常量和变量，VBScript的各种运算符。最后能够运用所学相关知识，编写简单的程序代码。课题第3章VBScript脚本语言3.4-3.5教学目标熟悉VBScript的常用内置函数。熟悉VBScript的程序流程控制语句。教学重点VBScript的常用内置函数教学难点VBScript的程序流程控制语句教学时间4课时教具准备计算机周次第二周教学组织与实施教师活动学生活动导入：ASP网页中包含了在服务器端运行的脚本代码程序，因而在开发和测试ASP应用程序之前，必须创建可供ASP应用程序运行的Web服务器工作平台。上课内容：一、VBScript内置函数日期时间函VBScript提供了若干个用于获取系统日期与时间的函数，如表3-5所示。【案例3-6】日期时间函数应用示例。代码保存为3-6.html文件，在IE浏览器中运行的结果如图3-6所示。<html><head><title>日期时间函数举例</title><scriptLANGUAGE="VBScript"></script></head><body></body></html>2、数学运算函数VBScript提供了多个用于数学运算的函数，如表3-6所示。【案例3-7】数学运算函数应用示例。将下面的代码保存为3-7.html文件，在浏览器中的运行结果如图3-7所示。<html><head><title>数学运算函数举例</title><scriptLANGUAGE="VBScript"></script></head><body></body></html>3、字符处理函数VBScript提供了多个用于字符处理的函数，如表3-7所示。【案例3-8】字符处理函数应用示例。将下面的代码保存为3-8.html文件，在浏览器中的运行结果如图3-8所示。<html><head><title>字符处理函数举例</title><scriptLANGUAGE="VBScript">Document.Write"Asc('ASP')的结果是："&Asc("ASP")Document.Write"<br/>Chr(88)的结果是："&Chr(88)aa="VBScript"bb="Script"Document.Write"<br/>Len('VBScript')的结果是："&Len(aa)Document.Write"<br/>InStr('VBScript','Script')的结果是："&InStr(aa,bb)</script></head><body></body></html>4、数据类型判别函数VBScript提供了若干个用于数据类型判别的函数，如表3-8所示。这些函数均将依据判别的结果返回一个逻辑值True或False。5.数据类型转换函数如表3-9所示，VBScript提供了多个用于数据子类型转换的函数，这些函数大都以字母C开头，即英文转换的意思。二、VBScript流程控制1、If语句（1）条件为True时执行单行语句如果在条件为True时仅运行一条语句，可使用If语句的单行语法结构。其语法格式为If<条件>Then<语句>【案例3-9】单行条件判断语句应用示例。下面的代码在运行后将弹出一个输入框，若用户输入的成绩大于80分，则将弹出显示“成绩不错嘛！”的消息框。<scriptLANGUAGE="VBScript">DimmyScoreScore=InputBox("请输入考试成绩：","输入成绩")IfScore>80Then MsgBox"成绩不错嘛！"</script>（2）条件为True时执行多行语句如果要在条件为True时运行多行语句，必须使用包含EndIf语句的多行（或块）语法结构。其语法格式为If<条件>Then<语句序列>EndIf（3）条件为True和False时分别执行指定语句可以使用If语句结构定义两个可执行语句块，条件为True时运行某一语句块，条件为False时运行另一语句块。其语法格式为If<条件>Then<语句序列1>Else<语句序列2>EndIf【案例3-10】条件为True和False时分别执行指定语句。下面的代码在运行后若在弹出的输入框键入的成绩大于80分，将弹出一个“成绩不错嘛！”的消息框，否则将弹出一个“成绩不理想，尚需努力！”的消息框。<scriptLANGUAGE="VBScript">DimmyScoreScore=InputBox("请输入考试成绩：","输入成绩")IfScore>80ThenMsgBox"成绩不错嘛！"ElseWord="成绩不理想，尚需努力！"MsgBoxWordEndIf</script>（4）对多个条件进行判断If语句结构的一种变形是允许从多个条件中加以选择，即添加若干个ElseIf子句以扩充If语句的功能，使得整个结构可以控制基于多种可能的程序流程。其语法格式为If<条件1>Then<语句块1>ElseIf<条件2><语句块2>ElseIf<条件3><语句块3>…[Else<语句块n+1>]EndIf【案例3-11】多条件判断语句应用示例。这是一个在服务器端运行的脚本程序，将根据成绩变量Score的值自动输出相应的成绩档次。<%DimScoreScore=82IfScore>=85ThenResponse.Write"优秀"ElseIfScore>=75ThenResponse.Write"良好"ElseIfScore>=60ThenResponse.Write"及格"ElseResponse.Write"不及格"EndIf%>2、Select…Case语句其语法格式为SelectCase<表达式>Case<值1><语句块1>Case<值2><语句块2>…[CaseElse<语句块n+1>]EndSelect【案例3-12】Select…Case语句应用示例。将下面的代码保存为3-12.asp文件，这是一个在服务器端运行的脚本程序，传送到浏览器窗口的显示结果如图3-9所示。<%DimWeek,MyweekWeek=WeekDay(Date)SelectCaseWeekCase1Myweek="星期日"Case2Myweek="星期一"Case3Myweek="星期二"Case4Myweek="星期三"Case5Myweek="星期四"Case6Myweek="星期五"CaseElseMyweek="星期六"EndSelectResponse.Write"今天是："&Date&Space(3)&Myweek%>3、DO…Loop循环其语法格式为Do<语句块>LoopWhile<条件>4、While…Wend循环其语法格式为While<条件><语句块>Wend5、For…Next循环其语法格式为For<循环变量>=<初始值>To<终止值>[Step<步长值>]<语句块>Next6、循环语句的嵌套VBScript允许在一个循环结构的循环体内包含另一个循环语句结构，即允许循环嵌套。7、用Exit退出循环VBScript语言允许在Do…Loop语句结构的循环体中设置专门的ExitDo语句，在某个条件满足时退出循环。此外还提供了一种专门退出For…Next循环的ExitFor语句。小结剩余时间让学生练习操作，完成课本案例内容，并能够通过案例内容加深对代码的认识。学生听课做笔记学生动手练习

板书设计教学随笔第3章VBScript脚本语言VBScript内置函数VBScript流程控制本周内容主要介绍了VBScript的相关知识，通过课程的学习，熟悉VBScript的常用内置函数和熟悉VBScript的程序流程控制语句。最后能够运用所学相关知识，编写简单的程序代码。课题第3章VBScript脚本语言3.6-3.7教学目标熟悉VBScript的Sub过程与Function过程。了解JavaScript的特点及其基本语法规则。教学重点JavaScript的特点及其基本语法规则教学难点VBScript的Sub过程与Function过程教学时间4课时教具准备计算机周次第八周教学组织与实施教师活动学生活动导入：在程序设计中，所谓过程（Procedure）是指用户编写的具有特定功能的一段相对独立的程序代码。VBScript的过程被分为Sub过程和Function过程两大类。无论是哪类过程，在编写脚本代码时都必须先进行定义，而后才可以被一个命令行或表达式显式地调用执行，或者在特定事件发生时被触发而调用执行。上课内容：一、VBScript过程1、Sub过程Sub过程是包含在Sub和EndSub语句之间的一组VBScript语句，执行所规定的操作但不返回值。Sub过程的定义格式为Sub过程名([参数1,参数2,…])<语句块>EndSub2、Function过程Function过程又被称为函数过程，是由Function语句开始、由EndFunction语句结束的一组VBScript语句。Function过程与Sub过程不同的是：Function过程通常会返回一个值，而Sub过程不返回值。Function过程的定义格式为Function过程名([参数1,参数2,…])<语句块><过程名>=<表达式>EndFunction3、VBScript过程的调用（1）Sub过程的调用在调用Sub过程时，只需输入过程名及参数值，若有多个参数，则各参数之间应使用逗号分隔。（2）Function过程的调用在调用Function过程时，其过程名必须出现在变量赋值语句的右端或者出现在表达式中，同时必须将所有参数包含在括号之中。（3）通过触发事件调用过程【案例3-22】通过触发事件调用过程示例。在网页中设置一个按钮并定义一个相应的Sub过程，使得单击这个按钮时将自动执行这个Sub过程。代码保存为3-22.html文件，运行结果如图3-16所示。二、JavaScript概述 1．脚本语言设定使用JavaScript编写脚本程序时，需要在程序代码开始处用如下形式的<script>标记进行脚本语言种类的设定。<scriptLanguage="JavaScript">2．语句与语句块在编写JavaScript脚本代码时，每行开始一条新语句，每条语句通常需要用分号（;）来显式地终止，例如下列两条语句：aBird="Robin";vartoday=newDate();3．语句注释在JavaScript脚本代码中允许添加注释文字，单行注释以一对正斜杠“//”开始，可以单独作为一条语句，也可以写在某条语句的后面；多行注释文字则应写在特定的“/*”和“*/”之间。例如，在下面的代码段中就包含了单行注释文字和多行注释文字。varnumA=100,numB=200; //声明变量的值document.write(numA+numB);/*以上程序的作用是将两个变量的值相加并将结果显示出来*/4．赋值与等式在JavaScript中，使用等号“=”来表示赋值操作。例如，下面的JavaScript代码语句是将数值3赋给变量anInteger，将字符串“JavaScript”赋给变量aString。anInteger=3;aString="JavaScript";需要特别注意的是：在JavaScript中比较两个数据是否相等时，不是使用一个等号，而是应该使用一对等号“==”。例如，下面的代码：if(age==100)Document.Write("You’re100yearsold!");5．数据类型JavaS

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

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

ASP动态网页设计教案

文档简介

温馨提示

最新文档

评论

ASP动态网页设计教案

文档简介

温馨提示

最新文档

评论

相关文档