Web 程序设计

Web程序设计

课程名称： Web程序设计 课程email：jiangyj_t@swufe.edu.cn 课程网址：http://jiangyj.cai.swufe.edu.cn

教材：Web程序设计，贾华丁等，高等教育出版社，2005教材：Web程序设计，贾华丁等，高等教育出版社，2005 • 参考资料： • 任何已出版的关于html的书籍 • http://www.w3.org • http://www.htmlhelp.com/

课程内容 • Web编程基础知识 • 程序设计 • VB Script概述 • ASP程序设计 • Web数据库程序设计基础 • 综合运用实例

课程安排 • 课堂讲授 • 上机实践 • 期末成绩计算方式 • 平时成绩 30%~50%：课堂、上机作业 • 期末考试 70%~50% • 部分同学做报告+5

上机安排 • 金融学（3）周五1-3节D206 • 金融学（双语）周三5-7节D206+D205

学生分组 • 4人一组(可有少于4个的组) • 上机时共同完成任务 • 每组组长1人，负责作业提交

作业提交方式 • 发送到邮箱： jiangyj_t@swufe.edu.cn • 邮件标题：组号_组长学号_组长姓名_内容 • 所有作业的提交以邮件附件(rar压缩文件)提交 • 邮件附件：组号_组长学号_组长姓名_N.rar • 其中，N代表第N周作业 • 如学号为200604001，姓名为张三的同学为第3组组长，第8周提交的作业的文件为压缩文件： • 3_200504001_张三_8.rar • 注意：其他格式的邮件将不被受理

免费空间 • ftp://192.168.190.200 • 账号:studentc • 密码:pwd2468 • 访问路径:http://192.168.190.200/classc • 可按学号创建自己的目录,并把自己的作业放在自己的目录下

第一章 Web基础知识 • 目标： • 了解Web的相关基础知识、概念。 • 为什么要学习Web程序设计

互联网与WEB • 网站 • 网站与网页 • 浏览器 • URL与域名 • 客户端/服务器(C/S) • 浏览器/服务器(B/S)

互联网 • Internet（因特网）：是全球性的、最具影响力的计算机互联网络，是一个用路由器实现多个广域网和局域网互联的大型网际网。 • Internet实现全球范围内的电子邮件、WWW信息查询和浏览、电子新闻、文件传输、语音与图像通信服务等功能。

什么是Web • Web全称World Wide Web（万维网），缩写WWW,是以超文本标记语言（HTML）语言和超文本传输协议（HTTP）为基础的，提供面向Internet服务，具有一致的用户界面的、全球性的、交互的、动态、多平台、分布式信息浏览系统。 • Web是一种体系结构，是建立在Internet上的一种网络服务。通过它可以访问分布于Internet主机上的链接文档。

客户机 服务器请求服务器进程客户机进程响应客户机／服务器模型 Web的工作原理 • Web体系结构：浏览器／服务器结构

Web服务器向浏览器提供服务的步骤 • 用户启动计算机的的浏览器程序，并在浏览器内指定一个URL，并通过浏览器向URL指向的Web服务器发送请求。 • Web服务器接到浏览器的请求后，把URL转换成页面所在服务器上的文件路径名。 • 如果URL指向的是普通的HTML文档，Web服务器直接将它送给浏览器。 • 如果HTML文档中嵌有ASP或CGI程序，Web服务器就运行该程序，并将结果传至浏览器

浏览网页

IP地址 • 域名(Domain Name) • URL(Uniform Resource Locator)

0~255 XXX.XXX.XXX.XXX 166.111.4.118 网络部分+机器部分 IP地址 • IP地址是识别Internet网络中的主机以及网络设备的唯一标识。 • 一个IP地址分为网络地址和主机地址两部分。

DNS采用层次结构，入网的每台主机 都可以有一个类似下面的域名：主机名.机构名.网络名.顶层域名 email.cic.tsinghua.edu.cn 从左到右，域的范围变大具有实际含义，比IP地址好记域名

URL ( Uniform Resource Locator ) http://www.tsinghua.edu.cn[:80]/docs/cindex.html 服务器地址路径文件名服务类型端口号网络信息文件存放位置统一资源定位器URL

网络提供的服务 • EMail • 文件传输 • 远程登录 • WWW浏览 • 聊天室 • BBS • …

端口(Port) 目的：解决一个IP地址提供多种服务的问题 HTTP标准80 FTP标准20 21 Telnet标准 23 Sendmail 标准25

INTERNET WWW 信息服务软件 Browser Web服务器与Web浏览器 • 提供WWW服务的计算机就是Web服务器. • 执行于计算机上,供使用者观看网页的应用程序就是Web浏览器.

浏览器 • Internet Explore • Netscape Navigator • Maxthon(MYIE) • FireFox

浏览器的工作方式

服务器端软件 • Pws:个人WEB服务器，用于95、98 • IIS：MS的产品，与Windows捆绑使用 • Apache：自由软件，开放源代码，免费使用，可用于多个平台

网站、网页和超级链接 • 浏览器与Web服务器之间是以页为单位来传送信息。 • 一个网站是由许多个网页构成的。 • 网页之间是通过超级链接将它们联系起来的。

What inside？

原来是…

HTML语言 • 超文本标记语言（HyperText Markup Language）是一种简单、通用的标记语言，可以用其制作包容图像、文字、声音等精彩内容的网页。 • WEB服务器与浏览器之间通过它互相沟通。 WEB中的信息可以通过它来表现。 • HTML 与平台无关，只要是相同的浏览器。 • HTML版本： 2.0、3.0、3.2、 4.0

HTML语言 • HTML有许多元素，文档通过元素标记就形成所谓的HTML文档。 • HTML 是文本文件，可以用纯文本编辑器来编辑（如Windows 的记事本、写字板） • 其文件后缀名必须是 .html 或 .htm • 只有通过浏览器才可以对HTML文档进行相应的解释。

HTML的基本语法 HTML 的主要语法是标记、标记属性和基本结构 • 标记 —用于描述功能的符号。如： <title>我的个人主页</title> • 标记属性— HTML语言的的标记具有一定的属性。如： <BODY background=“c:\cloud.gif”>

HTML语言 • HTML网页框架 • HEAD头元素 • 基本的文字处理 • 超级链接的建立 • 图片的使用 • 列表 • 表单

基本结构 <HTML> <HEAD><TITLE>标题名</TITLE></HEAD> <BODY> <H1>一级标题名</H1> ...... Web页主体 </BODY> </HTML> 把上面的框架进行扩展，以.htm和.html存放

HTML结构说明 • 文档处于标记<HTML>与</HTML>之间。 <HTML>用以声明这是 HTML 文件，便于浏览器正确处理。 • 文件分两部分，由<HEAD>至</HEAD>称为头部，<BODY>至</BODY>称体部。基本上两者各有适用的标记，如<TITLE>只可出现于开头部分。 • 头部用以存载重要信息，而只有体部会被显示。所以大部分标记会运用于体部。 • <TITLE>标示文件标题，显示于浏览器标题栏。每页应有明确的标题。

HTML的基本标记 头部标记： • 文档标记<html> • 头部标记<head> • 头部标题标记<titile> 体部标记： • 正文标记<body> • 正文层次（Heading）标记<hn>（n为层次标号） • 段落（Paragraphs）标记 • 正文排列格式（Lists）标记<ul>、<ol>、<dl> • 换行（Forced Line Breaks）标记 • 水平线（Horizontal Rules）标记<hr> • 字体（Font）标记 • 段落居中（Center）标记<center>

HEAD • 一些基本描述语句 • CSS、JavaScript • <META> • <STYLE> • <SCRIPT>

体部标记属性 <Body> ------ </Body> • Bgcolor ------ 背景色 • text ------ 文本色 • Link ------ 超级链接对象的颜色 • Alink ------ 连接中对象的颜色 • Vlink ------ 连接后对象的颜色 • Background ------ 背景文件

RGB R G B 255 0 0 红 0 255 0 绿 0 0 255 蓝 0 0 0 黑 255 255 255 白 255 255 0 黄 255 0 255 紫 0 255 255 青色彩代码的规则是“#rrggbb”

体部标记示例

常用标记－字体 • 文字

换行标记  单独出现，用于使网页文本另起一行。

字体标记示例

标题标记 <Hi>(i=1,2,3,4,5,6,7) 成对出现，用于设标记题，隐含换行的作用，H1 最大，H7最小，align属性用于对齐。

段落标记 ------ 用于在网页内插入新的段落，可以成对也可以不成对，具有align 属性。

水平线标记 <HR> 单独使用，属性：Size Width Align

字符格式标记 Bold italic Underlined

常用标记－图片 • <IMG src=“” width=“” height=“” border=“”> • SRC ： • 指明图像文件的地址，可使用本地文件名，也可使用URL形式 • WIDTH： • 图像宽度，值为整数，单位为屏幕像素点 • ALIGN： • 图像对齐方式 • ALT： • 以小标签显示该属性值 • BORDER： • 指明图像边框粗细 border

文字处理标记示例 <html> <head><title>文字显示和段落控制</title></head> <body background="images/back057.gif" text="#ff2222"> <center><h1>一级标题</h1></center><hr width=90% color=green> 这是黑体，大小为7号字，蓝色 这是一个段落 这是斜体这是粗体这是下划线字体 <big>这是大字体</big>这是小字体 这是下标字体1这是上标字体2 这些标记还可以混合使用 这是另一个段落 </body></html>

Web 程序设计

Web 程序设计

Presentation Transcript