第四章Web开发的基本技术 第一节万维网 WorldWideWeb 第二节HTML第三节Frontpage第四节交互网页的制作第五节ASP 动态服务主页 第六节Web数据库第七节关于Web2 0 本章内容 2020 1 20 第四章Web开发的基本技术 2 1 1Internet地址 Internet地址惟一地确定Internet上每台计算机与每个用户的位置 对用户来说 Internet地址有两种表示形式 IP地址和域名 接入Internet的计算机也有一个由授权机构分配的号码 这个号码就叫IP地址 IP地址分前后两部分 前面的部分叫网络号 后面的部分叫主机号 由于IP地址的数字地址很难记忆 通常使用一个文字IP地址来表示 把它叫做域名 2020 1 20 第四章Web开发的基本技术 3 1 2Internet提供的服务 Internet提供的常用的服务有 2020 1 20 第四章Web开发的基本技术 4 1 3www服务 在万维网上不仅可以看到文字 图片 而且可以听到声音 看到动画 www服务是通过客户机上的Web浏览器和Web站点上的Web服务器之间的通信来实现的 见图4 1 图4 1Web服务器的工作原理 2020 1 20 第四章Web开发的基本技术 5 1 4网页和超文本 经过系统设计 设计人员应能为程序开发人员提供完整 清楚的设计文档 并对设计规范中不清楚的地方做出解释 系统设计中 应遵循以下原则 一 网页网页是我们在网上用浏览器 如InternetExplorer 简称IE 看到的那些页面 这些页面实际上都是一个个文件 由若干互连的文本块组成的文本就是超文本 在www系统中 信息是按超文本方式组织的 二 HTML文件这种文件是用超文本标语言 HTML HyperTextMarkupLanguage 写的 它存放在WEB服务器上 关于HTML在下一节还要详细阐述 三 http协议www服务是执行http协议进行传输的 如果输入以下一句 进行信息定位 就可指向哈尔滨工业大学主页所在的位置 2020 1 20 第四章Web开发的基本技术 6 1 4网页和超文本 经过系统设计 设计人员应能为程序开发人员提供完整 清楚的设计文档 并对设计规范中不清楚的地方做出解释 系统设计中 应遵循以下原则 四 www浏览器这是客户机上的一种软件 通过它可以找到并浏览Internet上各种WWW服务器上的主页 常用的浏览器软件有微软公司的InternetExplorer和Netscape公司的Navigator等 五 搜索引擎搜索引擎是Internet上的一种www服务器 它能在Internet中主动搜索其他www服务器中的信息并对其索引 使用搜索引擎时 用户输入关键字后 搜索引擎能返回包含该关键字信息的URL 并提供通向该站点的链接 2020 1 20 第四章Web开发的基本技术 7 第一节万维网 WorldWideWeb 第二节HTML第三节Frontpage第四节交互网页的制作第五节ASP 动态服务主页 第六节Web数据库第七节关于Web2 0 本章内容 2020 1 20 第四章Web开发的基本技术 8 2 1用HTML做简单的网页 超文本文件是由超文本标记语言 HTML 写成 这种文件的格式就是大家所熟知的ASCII格式 2020 1 20 第四章Web开发的基本技术 9 2 2HTML文档的一般结构 下面举例说明HTML文档的一般结构 网上手机市场你想要买手机吗 你可以访问手机网站了解有关信息 建立和运行上述HTML文件的最原始的办法是将它写到Window附件中的记事本上 形成 txt文件 然后将后缀改为 html 用鼠标双击文件名 即可运行 这里 html 和 html 表示超文本的开始与结束 head 和 head 是超文本文件头的起止 body 和 body 是超文本正文主体的起止 p 和 p 是段落的起止 a 和 a 是定义超文本链接点的标记元素 href是标记元素a的属性 2020 1 20 第四章Web开发的基本技术 10 2 3在网页中插入图片 如果想在方才显示的屏幕上增加一个名为gxkj gif的图形 见图4 2 只要在上述HTML文档中增加下面一句即可 IMGSRC gxkj gif widfh 20 height 15 2020 1 20 第四章Web开发的基本技术 11 2 4用HTML定义表格 运用标记元素可以写出供浏览表格用的HTML文本 下面列出的HTML文本可以显示出图4 3所示的表格 表格名称第一标题列第二标题列第三标题列 图4 3浏览器上显示的表格 2020 1 20 第四章Web开发的基本技术 12 第一节万维网 WorldWideWeb 第二节HTML第三节Frontpage第四节交互网页的制作第五节ASP 动态服务主页 第六节Web数据库第七节关于Web2 0 本章内容 2020 1 20 第四章Web开发的基本技术 13 3 Frontpage 如果使用微软公司的FrontPage这种WEB编程工具就可以做到在几乎不需要编写HTML代码的情况下 完成网页的制作 同时自动地生成HTML文件 产品价格表 图4 5一个被链接的页面 下面通过将图4 4和图4 5二个页面相链接的例子来说明用FrontPage制作HTML文件的过程 2020 1 20 第四章Web开发的基本技术 14 3 Frontpage 新建 网页 普通网页 确定网页名字并存储 点击 插入表格 按钮 做出2 2表格 并把表格实线变为虚线 方法同用WORD编写文字 在左上格写上 网上手机商场 几个字 点击选图片钮 用右键点图片 点击图片属性 外观尺寸 在右下格写 正按八折销售 欢迎选购 字样 选中后 插入 组件 字幕 字幕属性 样式 格式 字体 另外做一个被连接的网页 手机价格表 主网页右上写 产品价格表见 选中后 用右键点击选 超链接属性 填上URL地址 2020 1 20 第四章Web开发的基本技术 15 第一节万维网 WorldWideWeb 第二节HTML第三节Frontpage第四节交互网页的制作第五节ASP 动态服务主页 第六节Web数据库第七节关于Web2 0 本章内容 2020 1 20 第四章Web开发的基本技术 16 4 交互网页的制作 我们需要通过网页实现网上注册 网上交谈 网上查询 这就需要使用交互性标记元素 通过交互性标记元素在网页上显示出一个人机对话的表单接口界面 参图4 6 2020 1 20 第四章Web开发的基本技术 17 4 交互网页的制作 我们看一下 用FORM标记元素在HTML页面上实现 提交 一部分功能 的HTML文档 宋欧巴信息的提交页面 htm请提供宋欧巴以下信息 然后单击提交 姓名 密码 FORM语句段的结构如下 FORM HTML的交互性标记元素 FORM 和 INPUT 仅仅提供了一个接口界面 要全部实现交互功能 仅靠HTML是不够的 还必须有ASP环境来进行处理 2020 1 20 第四章Web开发的基本技术 18 第一节万维网 WorldWideWeb 第二节HTML第三节Frontpage第四节交互网页的制作第五节ASP 动态服务主页 第六节Web数据库第七节关于Web2 0 本章内容 2020 1 20 第四章Web开发的基本技术 19 例 ASP文件VB SCR EXM ASP html head title 手机市场标题 title head body fori 3to7 Fontsize i 这里是手机市场 BR next body html 5 1ASP的定义和工作原理 ASP ActiveServerPages 是微软公司推出的 为其WEB服务器开发的一个组件 通过ASP 我们能够将HTML页面 脚本命令 ASP内置对象和ActiveX组件结合起来 建立动态 交互的Web应用程序 简单地讲 ASP是位于Web服务器端的脚本运行环境 2020 1 20 第四章Web开发的基本技术 20 图4 8ASP的工作过程 5 1ASP的定义和工作原理 运行下列ASP文件VB SCR EXM ASP后能显示出五行文字 内容都是 这里是手机市场 但字体将逐行放大 例 ASP文件VB SCR EXM ASP html head title 手机市场标题 title head body fori 3to7 Fontsize i 这里是手机市场 BR next body html 上述ASP文件是怎样执行 运行 的呢 其过程如图4 8所示 2020 1 20 第四章Web开发的基本技术 21 5 2ASP脚本编程 ASP的目的是实现用户与WEB服务器之间的信息交互 那么 通过什么来交换信息呢 首先 前面第三节中讲过 可以使用HTML中的FORM 表单 接收用户输入的HTML文件为 tijiao htm formmethod post action fanhui asp p 请提供以下信息 然后单击提交 p 姓名 inputname myname size 36 p 密码 inputname password type passwordsize 36 p inputtype submitvalue 提交 form 处理上面表单提交的数据 并将有关内容返回给用户的ASP文件为 fanhui asp myname Request Form myname password request form password Ifpassword 123456 then myname 先生 女士 我们接受您的申请 您可以用以下密码查阅我们的资料 abcde else 对不起 您的密码不对 Endif 2020 1 20 第四章Web开发的基本技术 22 5 3Internet信息服务 在调试和运行ASP文件之前 需在操作系统中先装好IIS服务 然后才可以运行 步骤如下 打开 控制面板 然后单击启动 添加 删除程序 按向导指示 完成对IIS的安装 单击Windows开始菜单 所有程序 管理工具 IIS 即可启动 Internet信息服务 管理工具 IIS默认的文档只有default htm和default asp 根据需要 应将你设计的asp加入 在浏览器中输入http localhost syasp cx send asp 即可运行 这里我们假定cx send asp是你的asp程序文件名 2020 1 20 第四章Web开发的基本技术 23 第一节万维网 WorldWideWeb 第二节HTML第三节Frontpage第四节交互网页的制作第五节ASP 动态服务主页 第六节Web数据库第七节关于Web2 0 本章内容 2020 1 20 第四章Web开发的基本技术 24 6 Web数据库 Web数据库系统是指以HTML为代表的Web页面 即网页 与位于底层的数据库的集成 Internet用户可以通过Web页面来访问和数据库中的数据 Oracle Sybase SQLServer等都可以为Web提供数据库支持 重要的是要解决Web页面和数据库之间的通信问题 2020 1 20 第四章Web开发的基本技术 25 6 Web数据库 ODBC是一种编程接口 它能使应用程序访问支持SQL查询语言的数据库管理系统 实现与各种数据库的通信 只要在互联网信息服务器 IIS 的Web服务器上安装ODBC驱动程序 就可方便地实现Web页面与数据库的连接 2020 1 20 第四章Web开发的基本技术 26 第一节万维网 WorldWideWeb 第二节HTML第三节Frontpage第四节交互网页的制作第五节ASP 动态服务主页 第六节Web数据库第七节关于Web2 0 本章内容 2020 1 20 第四章Web开发的基本技术 27 7 关于Web2 0 Web2 0是新一代互联网应用技术的统称 与Web1 0相比改变了传统用户从互联网网页获取信息的模式 将用户与网络的交互作为新一代技术的基本内核