980 likes | 1.22k Views
Web 程序设计. 课程名称: Web 程序设计 课程 email : jiangyj_t@swufe.edu.cn 课程网址: http://jiangyj.cai.swufe.edu.cn. 教材: Web 程序设计,贾华丁等,高等教育出版社, 2005 参考资料: 任何已出版的关于 html 的书籍 http://www.w3.org http://www.htmlhelp.com/. 课程内容. Web 编程基础知识 程序设计 VB Script 概述 ASP 程序设计 Web 数据库程序设计基础 综合运用实例. 课程安排. 课堂讲授
E N D
课程名称: 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服务器之间是以页为单位来传送信息。 • 一个网站是由许多个网页构成的。 • 网页之间是通过超级链接将它们联系起来的。
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)标记<p> • 正文排列格式(Lists)标记<ul>、<ol>、<dl> • 换行(Forced Line Breaks)标记<br> • 水平线(Horizontal Rules)标记<hr> • 字体(Font)标记<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”
常用标记-字体 • <FONT face=“” size=“” color=“”>文字</FONT>
换行标记<BR> 单独出现,用于使网页文本另起一行。
标题标记 <Hi>(i=1,2,3,4,5,6,7) 成对出现,用于设标记题,隐含换行的作用,H1 最大,H7最小,align属性用于对齐。
段落标记 <P>------</P> 用于在网页内插入新的段落,可以成对也可以不成对,具有align 属性。
水平线标记 <HR> 单独使用,属性:Size Width Align
字符格式标记 <B> Bold <I> italic <U> 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> <font face="黑体" size=7 color="0000ff">这是黑体,大小为7号字,蓝色</font><br> <p>这是一个段落<br> <I>这是斜体</I><B>这是粗体</B><U>这是下划线字体</U> <big>这是大字体</big><small>这是小字体</small> 这是下标字体<sub>1</sub>这是上标字体<sup>2</sup><br> <font face="楷体" size=6 color="cc8888"> <I><B><U>这些标记还可以混合使用</U></B></I></font></p> <p align=center>这是另一个段落<br> </p> </body></html>