基于WEB程序设计基础.ppt

基于WEB程序设计基础,任课教师：胡晓军,HTML,版权所有：浙江大学远程教育学院,教学计划,绪论 HTML语言 VB Script & Java Script Web网站的实现原理 IIS & ASP 实例,绪论,Internet介绍 Web介绍 Web程序设计 Web程序设计开发工具,Internet简介,Internet是一个全球性的计算机网络 由不同类型和规模的独立运行和管理的计算机网络，按照标准协议、通过各种通信媒体连接 TCP/IP协议，Internet互联的标准协议 全球Internet用户量达到2亿多，中国的Internet用户达到2千多万,Internet的起源,ARPAnet(1969)和NSFnet(1986) 80年代末美国军事、能源、航天、商业等网合并，形成US Internet WWW(World Wide Web)的产生，使Internet的应用很快进入文化、政治、经济、新闻、体育、娱乐、商业以及服务行业 中国于1994接入Internet，Internet的中文译名为“因特网” 国内的骨干网主要有:中国电信网(163,169)、中国联通网、中国网通网、教育网(CERnet)、科技网(CSTnet),Internet的用途,Email 文件传输服务(FTP) 电子公告栏(BBS) 远程登录 网络通讯服务 网络信息服务(WWW、Gopher、Archie、WAIS等）,Web介绍,网络信息服务是Internet独具特色和最富有吸引力的功能 WWW使用最为广泛，简称为Web 欧洲粒子物理实验室(CERN)于1989年提出，并在1992年得到实现 Mosaic和Netscape 由专门的组织进行规范化/,Web中的基本概念,HTTP(Hyper Text Transfer Protocol) HTML(Hyper Text Markup Language) URL(Universal Resource Locator) Web服务器 浏览器(IE、Netscape),Web程序设计,利用Web网页的方式来完成一定的功能的程序设计方式 一般利用交互式动态网页的方式 CGI ASP PHP 应用领域 信息保存与发布 设置Cookie 发送电子邮件 创建公用模板 各种数据库应用(论坛、MIS等),与传统程序设计比较,特点 基于网络的编程模式 以界面表现为主导 可以跨平台实现 容易入门和掌握 集中维护与管理,Web程序设计的优点,容易学习和使用 界面友好 功能比较完备,Web程序设计的缺点,难以实现复杂的系统 性能较差 浏览器解释 网络带宽 Intranet(内联网),Web程序设计的工具,网页制作类 文本编辑器 Notepad UltraEdit Word 专门的网页制作软件 FrontPage Netscape HotDog DreamWeaver 动态网页开发工具,教学内容,HTML简介 HTML文件的基本结构 HTML标签分类介绍 文字排版 图象 表格 框架(frame) 表单(form) 层叠样式表(css,Cascading Style Sheet),HTML简介,Hyper Text Markup Language，超文本标记语言 1.0随WWW一起产生 第一个官方版本是2.0，第一个完善的版本是3.2，最新版本是4.0，1997年发布 由维护 HTML 4.0中文说明书,基础知识,HTML语言不是真正的编程语言 HTML编写的文件是文本文件(.htm,.html) 是SGML(Standard Generalized Markup Language)的一个实现子集 标签(TAGS) 脚本(Script),HTML的基本结构,. . . , HTML 文件的正文 举例,Head中的元素, 这两个标签之间的文字会出现在标题中包括注释部分 字符集信息 #=us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr,gb2312, gb_2312-80,x-euc-tw, x-cns11643-1, x-cns11643-2, big5 自动刷新 举例,文字排版(一),版面颜色 bgcolor - 背景色彩 text - 非可链接文字的色彩 link - 可链接文字的色彩 alink - 正被点击的可链接文字的色彩 vlink - 已经点击(访问)过的可链接文字的色彩 #=rrggbb，16进制 举例 背景图 举例,文字排版(二),空格() 行的控制 文字对齐 #=left,center,right 文字分区 #=left,center,right 举例,字体(一),标题 . #=1, 2, 3, 4, 5, 6 字体大小 . #=1, 2, 3, 4, 5, 6, 7 物理字体 举例,字体(二),逻辑字体 字体颜色 举例,字体(三),客户端字体 ,#指可以在客户端操作系统中得到的字体，如MS Sans Serif和宋体等 不推荐使用 字符实体 空格 举例,列表,无序列表 有序列表 定义列表 举例,定制列表元素,无序列表的标记 #=disk, circle, square 有序列表的序号 #=A, a, I, i, 1 有序列表序号的起始值 #=number 举例,预格式化文本, ,超链接,URL 地址表示方法 : scheme通常为http、ftp、gopher、mailto、news或file 不同的scheme会有不同的弟子信息 标签 基本格式 之间的内容可被鼠标选取 举例,链接到本机路径,绝对路径 file:/磁盘驱动器|/路径/文件名称 相对路径 部分路径/文件名称 部分路径是相对当前路径而言的,链接到URL,链接到绝对路径 链接到相对路径 链接到其他主机 举例,链接到文件特定部分,在文件中设定目标点 跳转到目标点 跳转到其他文件的目标点 一般在编写大的网页和文档是比较有用 举例,超链接的其他属性,颜色 在标签中设置link=# vlink=# alink=#,#=rrggbb 打开一个新的窗口 之间可以不是文字 举例,图象,基本标签 属性 align width height alt vspace hspace border 举例,图象与文字,图象与单行文字 align=top,middle,bottom 图象与多行文字 align=left,right , 图象与周围文字的距离 vspace=#,hspace=# 举例,图形类型(一),图象类型(二),如果图像是基于文字的，或主要包含的剪贴画、艺术线条或素描，应该将它保存为 GIF 格式。如果图像主要包含实景信息，那最好用 JPG。 JPEG 图像压缩的越多，信息就丢失的越多。因此，在将文件保存为 JPEG 时，在压缩率与质量之间求得一个平衡是至关重要的。,显示方式,GIF图象的交互式显示方式 低分辨率显示模式 先显示lowsrc的图象，再显示src的图象,图形超链接(一),单图单一超链接 鼠标点击图象会转向超链接 单图多超链接 主要是Client Side Image Map,基本语句为 ,图象超链接(二),一个shape通常称为一个热点，shape共有三种：rect、circle、poly shape=“rect” coords=“x1,y1,x2,y2” shape=“circle” coords=“x1,y1,r” shape=“poly” coords=“x1,y1,x2,y2,” 图象的制作和区域的定位一般用图象处理工具来完成 举例,表格,基本语法 定义表格 定义行 定义表头 定义数据 举例,表格的属性(一),跨多行多列元素 跨多列 跨多行 表格的大小设置 边框 表格大小 表元间距 表元内部空白 举例,表格的属性(二),表格内文字对齐 水平方向 #=left,right,center 垂直方向 #=top,middle,bottom,baseline 举例,表格的属性(三),表格在网页内的对齐，与图象标签类似 #=left,right 表格的标题 #=left,right,center #=top,bottom 举例,表格的颜色,表元的背景色彩和背景图象 ,#=rrggbb 表格边框的色彩 举例,表格的分组,按行分组 按列分组 ,#=left,right,center 列的属性控制 #=从左数起，具有指定属性的列的列数 #=left, right, center 举例,边框的显示,显示所有 4 个边框 只显示上边框 只显示下边框 只显示上、下边框 只显示左、右边框 只显示左边框 只显示右边框 不显示任何边框 举例,分隔线的显示,显示所有分隔线 只显示组(Groups)与组之间的分隔线 只显示行与行之间的分隔线 只显示列与列之间的分隔线 不显示任何分隔线 举例,表格的功能,以表格方式显示数据 排版 举例,框架(frame),基本语法 和标签不能同时使用 之间的内容只出现在不支持框架的浏览器中,各窗口的大小设置,rows和cols的属性 rows=(n1,n2,.)或cols=(n1,n2,.) n1可以是点数也可以是整个frameset的宽度和高度的百分比 举例 border border=0 noresize 多重框架 frameset的嵌套 举例,框架的内容,src属性 src=“url” name属性 name=“名称” 举例 特殊的target _BLANK、_NEW、_PARENT、_SELF、_TOP 举例,Web网站的实现原理,Client/Server的结构 基于HTTP的通讯原语 HTTP 1.1 GET POST 性能优化 持久连接 Cache,表单(Form),提供Client与Server通讯的渠道，这是可以基于Web进行程序设计的基础 基本语法 . . Action:设定Form被提交后的动作 Method:数据传输的方式，GET/POST Name:用来标识一个Form,Input标签,这是最常用的Form标签，有以下属性 基本语法 * = Text、Password、Radio、Checkbox、Reset、Submit、Image、Hidden,文字输入, *=text,password *=password时，输入内容显示为* 单行文字输入 size maxlength :可以输入多行文本内容 Name:指定一个名称 Rows、Cols:指定输入的行数和列数 举例,选择,复选框 单选框 举例,列表框,Select和Option Name:选择项的名称 Size: Size=值，显示列表框 不设置Size，显示下拉框 Multiple:多选，用Ctrl配置鼠标实现多选 举例,其他, *=Submit，提交按钮 *=Reset，重置按钮 *=Image，图象坐标 *=Hidden，隐含发送的数据 用table对Form排版的例子,层叠样式表(CSS),目的:在有限的标签基础上产生多样的表现形式 定义样式规则，自定义文档的显示方式 控制页面的布局、字体、颜色等各种效果 作用 扩展HTML标签的功能 美化网页 控制页面布局 减少使用图片的情况 同时控制一批网页的显示风格,加入CSS,链接到CSS文档 .中加入CSS定义 . 使用注释 在标签中直接使用CSS CSS叙述产生重复时采用就近原则 举例,新增的标签,Link标签 Style标签 作用于文档的CSS Span标签 用于标记由相关联样式表定义其特别样式的文本，如果没有样式表指令，不影响显示,CSS语法,基本语法 标签1,.,标签n 属性1:属性值;.属性n:属性值 Class 对同一个选择符可以定义不同的类，能使相同的标签在不同的地方显示不同的样式 注意：单元名和类值是由句点分隔开的。当类值本身包含句点时，这种用法将带来一些问题。CSS语法规则使用反斜线来“逃避”类似句点这样的特殊字符。(“.”) ID 唯一指定单元标识符，同一文档中，没有两个单元的ID值是相同的。 举例,常用的css属性(一),字体属性 font-family font-style font-variant font-weight font-size font,常用的css属性 (二),颜色和背景 color background-color background-image background-repeat background-attachment backgrou