ASP 动态网页设计培训

ASP动态网页设计培训 鹤壁机电信息工程学校

培训要求 • 1、培训内容： • 第一章简介 • 第二章自己完成课本案例和课后习题，及时上交 • 第三章 CSS样式重点介绍 • 第四章 VBSCRIPT脚本编程重点介绍 • 第五章 ASP内建对象重点介绍 • 第七章 ADO数据库访问重点介绍 • 2、要求 • 及时完成并上交作业 2／163

目　录 • 第1章 ASP开发环境配置 • 第2章 HTML网页设计 • 第3章 CSS样式应用 • 第4章 VBScript脚本编程 • 第5章 ASP内置对象应用 • 第6章 ASP组件应用 • 第7章 ADO数据访问 • 第8章 BBS系统设计 3／163

第1章 ASP开发环境配置 • 1.1 Web基础知识 • 1.2 ASP技术概述 • 1.3 配置ASP运行环境 • 1.4 设置Dreamweaver站点 4／163

1.1 Web基础知识 • 1.1.1 Web基本概念 • Web • URL • HTTP • HTML • Web页 • Web站点 • 1.1.2 静态网页与动态网页 • 静态网页的处理流程 • 动态网页的处理流程第1章目录 5／163

1.1 Web基础知识 • 1.1.3 脚本语言 • 脚本是指嵌入到网页中的程序代码，所使用的编程语言称为脚本语言。 • 按照执行方式和位置的不同，脚本分为： • 客户端脚本 • 服务器端脚本 • 目前比较常用的浏览器脚本语言有两种，即： • VBScript • JavaScript。 • 微软公司推出了应用于Internet Exploer浏览器的另一种脚本语言并将其命名为JScript。第1章目录 6／163

1.2 ASP技术概述 • 1.2.1 ASP处理流程 • 用户发出ASP文件请求。 • Web浏览器按照URL指定的位置通过网络向Web服务器发出一个ASP文件请求。 • Web服务器收到该请求后，根据扩展名.asp判断出这是一个ASP文件请求，并从指定位置上获取所需要的ASP文件。 • Web服务器向ASP解释器asp.dll发送ASP文件的内容。 • ASP解释器asp.dll自上而下查找、逐行解释并执行ASP页中包含的服务器端脚本，然后把所生成标准的HTML代码送回到Web服务器。 • Web服务器将HTML代码发送到客户端计算机上的Web浏览器。 • Web浏览器负责对HTML代码进行解释，并将结果呈现在浏览器窗口中。第1章目录 7／163

1.2 ASP技术概述 • 1.2.2 ASP的特点和功能 • 特点 • 语言简单易学。 • 无需编译。 • 容易编写和维护。 • 独立于浏览器。 • 使用对象和组件。 • 使用数据访问功能。 • 执行效率高。 • 语言兼容性强。 • 可扩展性好。 • 安全性高。 • 功能 • 处理访问者通过浏览器提交到Web服务器的表单数据。 • 访问服务器端的后台数据库。 • 根据服务器的配置，实现对服务器端文件的读写操作。 • 控制和管理用户的访问权限，以限制用户可在网站上执行的操作。 • 记录访问者的信息，跟踪用户在网站上的活动并保存到日志文件中。 • 结合HTML页面元素，实现各种形式的网站导航。 • 结合ActiveX组件的应用，完成收发电子邮件和上传文件等操作。第1章目录 8／163

1.2 ASP技术概述 • 1.2.3 ASP开发工具 • 记事本 • Dreamweaver • Dreamweaver 8 • Dreamweaver CS3 • Dreamweaver CS4 • Visual InterDev 第1章目录 9／163

1.3 配置ASP运行环境 • 1.3.1 安装IIS组件 • 装IIS 6.0 • 验证IIS安装 • Inetpub\wwwroot文件夹：默认网站的主目录 • Internet信息服务（IIS）管理器 • World Wide Web Publishing Service • 默认网站：http://localhost • 1.3.2 配置服务器 • 启用ASP应用程序服务器：在Web服务器上启用ASP • 设置站点的访问模式：启用匿名访问 • 设置站点的默认文档第1章目录 10／163

1.3 配置ASP运行环境 • 1.3.3 创建虚拟目录 • 如果要从站点主目录之外的文件夹发布信息，则必须在Web站点上创建虚拟目录。虚拟目录是指在物理上未包含在站点主目录下的特定文件夹，但客户浏览器却将其视为包含在主目录下的目录。 • 虚拟目录与一个实际物理目录相对应，这个实际物理目录既可以是本地计算机的某个目录，也可以是远程计算机上的某个共享目录。虚拟目录具有别名，这个别名映射到Web内容所在实际物理目录，Web浏览器通过别名来访问此目录。别名与实际文件夹名称可以相同，也可以不相同。别名通常要比目录的路径名短，更便于用户输入。使用别名更为安全，因为用户不知道文件是否真的存在于服务器上，所以无法使用这些信息来修改文件。 • 若要在Web站点中创建虚拟目录，可在Internet信息服务（IIS）管理器中，右键单击【默认网站】并选择【新建】→【虚拟目录】，然后根据虚拟创建向导的提示进行操作。第1章目录 11／163

1.4 设置Dreamweaver站点 • 1.4.1 Dreamweaver站点的组成 • 本地根文件夹：可以位于本地计算机或网络服务器上，用于存储正在处理的文件。 • 远程文件夹：位于运行Web服务器的计算机上，存储用于测试、生产和协作等用途的文件。 • 测试服务器文件夹：Dreamweaver在其中处理动态网页的文件夹。 • 1.4.2 设置本地站点 • 站点名称 • 本地根文件夹 • 默认图像文件夹 • HTTP地址第1章目录 12／163

1.4 设置Dreamweaver站点 • 1.4.3 设置远程站点 • 访问方法 • FTP：使用FTP连接到Web服务器 • 本地/网络：访问网络文件夹或在本地计算机上存储文件或运行测试服务器 • RDS：如果使用RDS（远程开发服务）连接到Web服务器 • Visual SourceSafe (R) 数据库 • WebDAV：基于Web的分布式创作和版本控制协议连接到Web服务器第1章目录 13／163

1.4 设置Dreamweaver站点 • 1.4.4 设置测试服务器 • 访问服务器的方式：FTP或本地/网络 • 测试服务器文件夹 • URL前缀 • 1.4.4 创建ASP测试页 • 在Dreamweaver中创建一个本地站点并对远程信息和测试服务器信息进行设置后，应及时创建一个动态网页，借此测试远程服务器和应用程序服务器配置是否正确。第1章目录 14／163

第2章 HTML网页设计 • 2.1 HTML语言基础 • 2.2 设置文本格式 • 2.3 表格应用 • 2.4 图像应用 • 2.5 生成动感效果 • 2.6 使用超链接 • 2.7 框架应用 • 2.8 设计表单 15／163

2.1 HTML语言基础 • 2.1.1 HTML概述 • HTML标记的一般格式： • <标记属性="值" 属性="值" …>要呈现的内容</标记> • <标记属性="值" 属性="值" … /> • 例如： • <font face="华文行楷" size="2" color="#FF0000">ASP动态网页设计</font> • <input type="submit" name="btnSubmit" value="提交" /> • HTML元素的通用属性 • id：为HTML元素指定一个唯一的标识符。 • class：对HTML元素应用CSS类样式。 • style：为一个单独出现的元素指定CSS样式。第2章目录 16／163

2.1 HTML语言基础 • 2.1.2 XHTML代码规范介绍 • 所有标记必须使用相应的结束标记进行关闭 • 标记及其属性名称必须使用小写字母 • 标记的属性值必须使用引号括起来 • 标记的所有属性必须具有值 • 强制XHTML元素，所有文档都必须文档类型声明<!DOCTYPE> 第2章目录 17／163

2.1 HTML语言基础 • 2.1.3 HTML网页基本结构 • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> • <title>网页标题</title> • <script>…</script> • <style>…</style> • <link …/> • <head> • <body 属性="值"属性="值" … > • 在这里添加网页的内容，包括文本、图像、声音、视频以及动画等 • </body> • </html> 第2章目录 18／163

2.1 HTML语言基础 • 2.1.4 创建HTML网页 • 在Dreamweaver中创建HTML网页 • 从【文件】菜单中选择【新建】命令 • 在文档工具栏上单击【新建】按钮。 • 在网页中添加内容 • 保存网页 • 2.1.5 添加注释 •  第2章目录 19／163

2.2 设置文本格式 • 2.2.1 分段与换行 • 段落标记 • <p align="where">...</p> • 换行标记 • <br /> • 标题标记 • <h1 align="where">...</h1> • . . . • <h6 align="where">...</h6> • 水平线标记 • <hr align="where" color="colorTripletOrName" noshade="noshade" width="length" /> 第2章目录 20／163

2.2 设置文本格式 • 2.2.2 设置字体、字号和颜色 • 字体标记 • <font face="fontFamily[, ...fontFamilyNameN]" • size=" intergetOrRelativeSize" color="colorTripletOrName">...</font> • face：字体 • size：字号 • color：颜色第2章目录 21／163

2.2 设置文本格式 • 2.2.3 设置字符格式 • 粗体：<b>...</b>或<strong>...</strong> • 大字体：<big>...</big> • 斜体：<i>...</i>或<em>...</em> • 小字体：<small>...</small> • 删除线：<s>...</s>或<strike>...</strike> • 下标：<sub>...</sub> • 上标：<sup>...</sup> • 下划线：<u>...</u> 第2章目录 22／163

2.2 设置文本格式 • 2.2.4 插入特殊字符第2章目录 23／163

2.3 表格应用 • 2.3.1 创建基本表格 • <table> • <caption>表格标题</caption> • <tr> • <td>数据项</td><td>数据项</td>. . . <td>数据项</td> • </tr> • . . . • </table> • 在Dreamweaver CS3中：从【插入】菜单中选择【表格】命令。第2章目录 25／163

2.3 表格应用 • 2.3.2 设置表格的属性 • Align background • bgcolor border bordercolor • bordercolordark bordercolorlight • cellpadding cellspacing • frame height • rules width • 在Dreamweaver中设置表格的属性: • 用属性检查器 • 用标签检查器第2章目录 26／163

2.3 表格应用 • 2.3.3 设置表格元素的属性 • tr标记的常用属性 • align background bgcolor • bordercolor bordercolordark bordercolorlight • height valign width • td和th标记的常用属性 • align background bgcolor • bordercolor bordercolordark • bordercolorlight colspan height • nowrap rowspan valign width 第2章目录 27／163

2.4 图像应用 • 2.4.1 嵌入图像 • img标记 • <img src="URL" alt="textMessage" height="length" width="length" border="pixels" • hspace="pixelsCount" vspace="pixelsCount" align="where" /> • src：指定图像文件的路径 • alt：指定替代图像的文本信息 • height和width：分别指定图像的宽度和高度 • border：指定图像的边框宽度 • hspace和vspace：指定图像与文本之间在水平方向和垂直方向上的间距（像素）。 • align：指定图像与文本的对齐方式或绕排方式 • 在Dreamweaver中插入图像 • 从【插入】菜单中选择【图像】命令第2章目录 28／163

2.4 图像应用 • 2.4.2 播放视频剪辑 • 使用img标记播放视频剪辑 • controls：指定在视频窗口下附加一个播放控制条。 • dynsrc：指定要播放的视频剪辑的url，视频文件格式可为.avi、.mov或.mpg等。 • start：指定何时开始播放多媒体文件，其取值可以是fileopen或mouseover。 • loop：指定多媒体文件的播放次数。若不限播放次数，可将该属性设置为?1。 • loopdelay：指定两次播放之间的延迟时间，以毫秒为单位。第2章目录 29／163

2.5 生成动感效果 • 2.5.1 创建滚动字幕 • <marquee behavior="motionType" bgcolor="colorTripletOrName" • direction="scrollDirection" height="length" width="length" • hspace="pixelCount" vspace="pixelCount" loop="count" • scrollamount="pixelCount" scrolldealy="milliseconds"> • . . . • </marquee> • behavior：指定字幕动画的类型 • bgcolor：指定字幕的背景颜色。 • direction：指定字幕内容的移动方向 • height和width：指定字幕的高度和宽度 • hspace和vspace：指定字幕的水平边距和垂直边距 • loop：指定字幕的滚动次数 • scrollamount：指定字幕内容每次移动的像素数 • scrolldealy：指定字幕内容两次移动之间的时间间隔第2章目录 30／163

2.5 生成动感效果 • 2.5.2 为网页添声音 • 用bgsound标记添加声音 • <bgsound src="URL" balance="signedInteger" loop="integer" volume="signedInteger"> • src：指定要播放的声音文件的URL • loop：指定声音播放的次数 • 通过插件添加声音 • <embed src="URL" align="where" autostart="true" | "flase" • loop="true" | "false" |"integer" starttime="mm:ss" endtime="mm:ss" • height="length" width="length" hidden="true" | "flase"> • </embed> • src：指定要播放的声音文件的URL • autostart：指定声音文件是否自动开始播放 • loop：指定是否循环播放或播放的次数 • pluginspage：指定用户可以从中下载插件的网站的完整URL • heigh和width：分别指定嵌入对象的高度和宽度 • 在Dreamweaver中，可以通过插入插件的方法在网页中添加声音和视频等媒体内容，此时将自动生成embed标记并对其属性进行设置。第2章目录 31／163

2.5 生成动感效果 • 2.5.3 在网页中嵌入视频 • 使用embed标记不仅可以在网页中嵌入声音文件，也可以嵌入视频文件，为此应将src属性设置为视频文件的URL，并通过height和width属性设置视频播放器插件的高度和宽度，根据需要也可以对插件的其他属性进行设置。 • 2.5.4 在网页中嵌入Flash动画 • 在HTML语言中，可使用object标记和embed标记在网页中嵌入Flash动画文件。不过，通过编写代码的方式来设置各种属性颇为麻烦，建议使用Dreamweaver通过可视化方式添加Flash动画。第2章目录 32／163

2.6 使用超链接 • 2.6.1 超链接与链接路径 • 超链接是指从一个网页指向一个目标文档的连接关系。目标文档可以是： • 网页 • 同一网页上的不同位置 • 图片 • 电子邮件地址 • Word文档 • Flash影片文件 • 程序文件 • 在一个网页中用做超链接的对象，可以是： • 文本 • 图片 • Flash动画 • 链接路径是指作为链接起点的文档到作为链接目标的文档之间的文件路径，分为： • 绝对路径 • 文档相对路径 • 站点根目录相对路径第2章目录 33／163

2.6 使用超链接 • 2.6.2 创建超链接 • 使用a标记创建超链接 • <a href="URL" name="elementIdentifier" target="windowOrFrameName" title="promptText">...</a> • href：指定要链接的目标资源的URL地址 • name：表示网页内的定位点位置，称为锚点 • target：指定一个窗口或框架的名称，目标文档将在该窗口或框架中打开 • title：指定鼠标指向链接时所显示的提示文本 • 在Dreamweaver中创建超链接： • 使用属性检查器第2章目录 34／163

2.7 框架应用 • 2.7.1 创建框架网页 • 框架网页的基本结构 • <html> • <head> • <title>框架网页标题</title> • </head> • <frameset cols="col1,col2, ..." rows="row1, row2..."> • <frame src="URL"… /> • <frame src="URL"… /> • . . . • </frameset> • <noframes> • <body> • <p>此网页使用了框架，但您的浏览器不支持框架。</p> • </body> • </noframes> • </html> 第2章目录 35／163

2.7 框架应用 • 2.7.2 设置框架集的属性 • cols：指定框架的列宽，可为像素数（n）、百分比（n%）和相对尺寸（n*）。 • rows：指定框架的行高，可为像素数（n）、百分比（n%）和相对尺寸（n*）。 • border：指定边框的宽度，以像素为单位。 • bordercolor：指定边框的颜色。 • frameborder：指定框架周围是否显示三维边框，可取的值有：1、0、no、yes。1或yes表示显示边框；0或no表示不显示边框。默认值为no。 • framespacing：指定各框架之间的间隔。 • 在Dreamweaver中，可单击框架集内两个框架之间的分隔线，以选择该框架集，然后利用属性检查器对框架集的属性进行设置。第2章目录 36／163

2.7 框架应用 • 2.7.3 设置框架的属性 • src：指定在该框架中显示的网页。 • name属性：指定框架的名称。 • border：指定框架边框的宽度。 • bordercolor：指定边框的颜色。 • frameborder：指定框架周围是否显示边框，其取值可以是：1或yes（显示边框）、0或no（不显示边框）。 • frameheight：指定框架内容与上下边框的间距。 • framewidth：指定框架内容与左右边框的间距。 • scrolling：指定是否为框架添加滚动条，其取值可以是：yes（添加）、no（不添加）或auto（在需要时自动添加）。 • noresize：不能调整框架的大小。 • 在Dreamweaver中，可按住Alt键同时单击一个框架，以选择该框架，然后利用属性检查器对该框架的属性进行设置。第2章目录 37／163

2.8 设计表单 • 2.8.1 插入表单 • <form name="elementIdentifier" method ="get" | "post" • action="URL" enctype="MIMEType" target=" windowOrFrameName"> • . . . • </form> • name：指定表单的名称 • method：指定发送表单的HTTP方法 • action：指定提交表单时将被访问的URL • enctype：指定提交到服务器表单数据的MIME编码类型 • target：指定用来显示表单处理结果的窗口或框架第2章目录 38／163

2.8 设计表单 • 2.8.2 添加文本框和密码框 • 文本框： • <input type="text" name="elementIdentifier" value="text" size="elementWidth" maxlength=" characterCount "... /> • 密码框： • <input type="password" name="elementIdentifier" value="text" size="elementWidth" maxlength="characterCount"... /> • 文本区域： • <textarea name="elementIdentifier" rows="rowCount" cols="columnCount"...>初始内容</textarea> • 在Dreamweaver中，可以利用插入栏来添加文本框、密码框和文本区域。第2章目录 39／163

2.8 设计表单 • 2.8.3 添加按钮 • 通过input标记定义按钮： • <input type="submit" | "reset" | "button" name="elementIdentifier " value="text"... /> • value属性：指定显示在按钮上的标题文本。 • type属性：指定按钮的类型，其取值如下。 • submit：指定创建一个提交按钮。 • reset：指定创建一个重置按钮。 • button：指定创建一个自定义按钮。 • 在Dreamweaver中插入按钮： • 选择【插入】→【表单】→【按钮】命令 • 在插入栏的【表单】类别中单击【按钮】按钮。第2章目录 40／163

2.8 设计表单 • 2.8.4 添加单选按钮 • 使用input标记创建单选按钮： • <input type="radio" name=" elementIdentifier" value="text" checked="checked" ... /> • name：指定单选按钮的名称。若干个名称相同的单选按钮构成一个相互排斥的单选按钮组，从该组中只能选中一个选项。 • value：指定提交表单时单选按钮的值。 • checked：指定首次打开表单时该单选按钮处于选中状态 • 在Dreamweaver中添加单选按钮： • 选择【插入】→【表单】→【单选按钮】命令 • 在插入栏的【表单】类别中单击【单选按钮】按钮。第2章目录 41／163

2.8 设计表单 • 2.8.5 添加复选框 • 使用input标记定义复选框： • <input type="checkbox" name="elementIdentifier" value="text" checked＝"checked" ... /> • name：指定复选框的名称。 • value：指定提交表单时复选框的值。 • checked：指定首次打开网页时该复选框处于选中状态。 • 在Dreamweaver中插入复选框： • 选择【插入】→【表单】→【复选框】命令 • 在插入栏的【表单】类别中单击【复选框】按钮。第2章目录 42／163

2.8 设计表单 • 2.8.6 添加隐藏域 • 使用input标记创建隐藏域： • <input type="hidden" name="elementIdentifier" value="text" /> • 在Dreamweaver中添加隐藏域： • 选择【插入】→【表单】→【隐藏域】命令 • 插入栏的【表单】类别中单击【隐藏域】按钮。第2章目录 43／163

2.8 设计表单 • 2.8.7 添加文件域 • 使用input标记创建文件域： • <input type="file" name="elementIdentifier" value="text" size="elementWidth" maxlength="characterCount"... /> • 在Dreamweaver中添加文件域： • 选择【插入】→【表单】→【文件域】命令 • 在插入栏的【表单】类别中单击【文件域】按钮。 • 注意： • 表单的“MIME类型”应设置为multipart/form-data。第2章目录 44／163

2.8 设计表单 • 2.8.8 添加列表框 • 使用select和option标记创建列表框： • <select name="elementIdentifier" size="rowCount" multiple="multiple"> • <option value="text" [selected="selected"]>...</option> • . . . • </select> • name：指定列表框的名称。 • size：指定在列表框中显示的选项行数。 • multiple：指定列表框允许做多重选择。 • 在Dreamweaver中添加列表框： • 选择【插入】→【表单】→【列表/菜单】命令 • 在插入栏的【表单】类别中单击【列表/菜单】按钮第2章目录 45／163

2.8 设计表单 • 2.8.9 添加标签 • 使用label标记定义标签： • <label for=" inputElementIdentifier" accesskey="character" tabindex="integer">...</label> • for：指定与标签关联的表单域的唯一标识符（id属性）。 • accesskey：指定单个字符键作为访问键。 • tabindex：指示该元素的Tab键顺序。 • 在Dreamweaver中添加标签： • 单击插入栏的【表单】类别中【标签】按钮第2章目录 46／163

2.8 设计表单 • 2.8.10 添加字段集 • 使用fieldset和legend标记在表单中添加字段集： • <fieldset> • <legend>标题文本</legend> • 其他表单域 • </fieldset> • 在Dreamweaver中添加字段集： • 在插入栏的【表单】类别中单击【字段集】按钮第2章目录 47／163

第3章 CSS样式应用 • 3.1 创建和应用CSS样式 • 3.2 设置CSS属性 48／163

3.1 创建和应用CSS样式 • 3.1.1 CSS概述 • CSS（Cascading Style Sheet）称为层叠样式表，是一组格式设置规则，可用于控制网页内容的外观。 • 通过使用CSS样式设置页面的格式，可以将页面的内容与表示形式分离开。 • 使用CSS可以非常灵活并更好地控制页面的确切外观。 • 使用CSS可以控制网页中块级元素的格式和定位。 • “层叠”表示对同一个页面元素应用多种样式的能力。 • CSS的主要优点在于它提供了便利的更新功能。第3章目录 49／163

3.1 创建和应用CSS样式 • 3.1.2 定义CSS规则 • selector {attribue: value; attribue: value; ...} • selector表示选择符。 • 属性声明需要使用花括号括起来，声明的内容由一些属性-值（attribue-value）对组成，属性名称与属性值用冒号（:）分隔，不同属性-对用分号（;）分隔。 • 在HTML网页中定义CSS规则时，应将规则定义放在<style>与</style>标记之间；如果是在单独的CSS文件中定义规则，则不必使用<style>标记。第3章目录 50／163

ASP 动态网页设计培训

ASP 动态网页设计培训

Presentation Transcript